import type { SearchParams } from '@/app/models';
import { Button } from '@/views/components/ui/button';
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from '@/views/components/ui/card';
import { SearchFilters } from './search-filters';

interface SearchFormProps {
  searchParams: SearchParams;
  onSearch: () => void;
  onClear: () => void;
  onParamChange: (field: keyof SearchParams, value: string) => void;
  isLoading?: boolean;
}

export function SearchForm({
  searchParams,
  onSearch,
  onClear,
  onParamChange,
  isLoading = false,
}: SearchFormProps) {
  return (
    <Card className="border border-slate-200 dark:border-gray-800 shadow-xl">
      <CardHeader className="bg-linear-to-r py-4 rounded-t-2xl from-slate-50 to-gray-50 dark:from-gray-800 dark:to-gray-900 border-b">
        <div className="flex items-center gap-3">
          <CardTitle className="text-2xl text-gray-800 dark:text-gray-100 font-medium">
            Busca
          </CardTitle>
        </div>
      </CardHeader>

      <CardContent className="pt-6">
        <SearchFilters
          searchParams={searchParams}
          onParamChange={onParamChange}
        />
dddddddd
        <div className="flex flex-col sm:flex-row gap-4 justify-between items-center pt-4 border-t">
          <Button
            onClick={onSearch}
            disabled={isLoading}
            className="bg-linear-to-r from-primary to-primary/90 text-lg text-white px-8 py-6 font-medium shadow-lg hover:shadow-xl transition-all duration-300 min-w-50">
            {isLoading ? 'Buscando...' : 'Realizar Busca'}
          </Button>

          <Button
            variant="outline"
            onClick={onClear}
            className="border-primary/30 text-primary hover:bg-primary/20 dark:border-primary/80 dark:hover:bg-blue-900/30">
            Limpar Filtros
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}
