/**
 * Header component for Closed Requests page
 */

import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { FileText, RefreshCw } from 'lucide-react';

interface ClosedRequestsHeaderProps {
  totalRecords: number;
  loading: boolean;
  refreshing: boolean;
  onRefresh: () => void;
}

export function ClosedRequestsHeader({
  totalRecords,
  loading,
  refreshing,
  onRefresh,
}: ClosedRequestsHeaderProps) {
  return (
    <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-3 sm:gap-4 md:gap-6" data-testid="closed-requests-header">
      <div className="space-y-1 sm:space-y-2">
        <div className="flex items-center gap-2 sm:gap-3">
          <div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl flex items-center justify-center shadow-lg">
            <FileText className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
          </div>
          <div>
            <h1 className="text-xl sm:text-2xl md:text-3xl font-bold text-gray-900">My Closed Requests</h1>
            <p className="text-sm sm:text-base text-gray-600">Review your completed and archived requests</p>
          </div>
        </div>
      </div>
      
      <div className="flex items-center gap-2 sm:gap-3">
        <Badge variant="secondary" className="text-xs sm:text-sm md:text-base px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 bg-slate-100 text-slate-800 font-semibold" data-testid="closed-requests-count">
          {loading ? 'Loading…' : `${totalRecords} closed`}
          <span className="hidden sm:inline ml-1">requests</span>
        </Badge>
        <Button 
          variant="outline" 
          size="sm" 
          className="gap-1 sm:gap-2 h-8 sm:h-9"
          onClick={onRefresh}
          disabled={refreshing}
          data-testid="closed-requests-refresh"
        >
          <RefreshCw className={`w-3.5 h-3.5 sm:w-4 sm:h-4 ${refreshing ? 'animate-spin' : ''}`} />
          <span className="hidden sm:inline">{refreshing ? 'Refreshing...' : 'Refresh'}</span>
        </Button>
      </div>
    </div>
  );
}

