/**
 * My Requests Filters Section Component
 */

import { Card, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Search } from 'lucide-react';

interface MyRequestsFiltersProps {
  searchTerm: string;
  statusFilter: string;
  priorityFilter: string;
  templateTypeFilter: string;
  onSearchChange: (value: string) => void;
  onStatusChange: (value: string) => void;
  onPriorityChange: (value: string) => void;
  onTemplateTypeChange: (value: string) => void;
}

export function MyRequestsFilters({
  searchTerm,
  statusFilter,
  priorityFilter,
  templateTypeFilter,
  onSearchChange,
  onStatusChange,
  onPriorityChange,
  onTemplateTypeChange,
}: MyRequestsFiltersProps) {
  return (
    <Card className="border-gray-200" data-testid="my-requests-filters">
      <CardContent className="p-3 sm:p-4 md:p-6">
        <div className="flex flex-col md:flex-row gap-3 sm:gap-4 items-start md:items-center">
          <div className="flex-1 relative w-full">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-3.5 h-3.5 sm:w-4 sm:h-4" />
            <Input
              placeholder="Search requests by title, description, or ID..."
              value={searchTerm}
              onChange={(e) => onSearchChange(e.target.value)}
              className="pl-9 text-sm sm:text-base bg-white border-gray-300 hover:border-gray-400 focus:border-blue-400 focus:ring-1 focus:ring-blue-200 h-9 sm:h-10"
              data-testid="search-input"
            />
          </div>

          <div className="flex gap-2 sm:gap-3 w-full md:w-auto">
            <Select value={statusFilter} onValueChange={onStatusChange}>
              <SelectTrigger
                className="flex-1 md:w-28 lg:w-32 text-xs sm:text-sm bg-white border-gray-300 hover:border-gray-400 focus:border-blue-400 focus:ring-1 focus:ring-blue-200 h-9 sm:h-10"
                data-testid="status-filter"
              >
                <SelectValue placeholder="Status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Status</SelectItem>
                <SelectItem value="draft">Draft</SelectItem>
                <SelectItem value="pending">Pending</SelectItem>
                <SelectItem value="paused">Paused</SelectItem>
                <SelectItem value="approved">Approved</SelectItem>
                <SelectItem value="rejected">Rejected</SelectItem>
                <SelectItem value="closed">Closed</SelectItem>
              </SelectContent>
            </Select>

            <Select value={priorityFilter} onValueChange={onPriorityChange}>
              <SelectTrigger
                className="flex-1 md:w-28 lg:w-32 text-xs sm:text-sm bg-white border-gray-300 hover:border-gray-400 focus:border-blue-400 focus:ring-1 focus:ring-blue-200 h-9 sm:h-10"
                data-testid="priority-filter"
              >
                <SelectValue placeholder="Priority" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Priority</SelectItem>
                <SelectItem value="express">Express</SelectItem>
                <SelectItem value="standard">Standard</SelectItem>
              </SelectContent>
            </Select>

            <Select value={templateTypeFilter} onValueChange={onTemplateTypeChange}>
              <SelectTrigger
                className="flex-1 md:w-28 lg:w-32 text-xs sm:text-sm bg-white border-gray-300 hover:border-gray-400 focus:border-blue-400 focus:ring-1 focus:ring-blue-200 h-9 sm:h-10"
                data-testid="template-type-filter"
              >
                <SelectValue placeholder="Template Type" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Templates</SelectItem>
                <SelectItem value="CUSTOM">Non-Templatized</SelectItem>
                <SelectItem value="DEALER CLAIM">Dealer Claim</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

