import type { SearchParams } from '@/app/models';
import { FilterField } from './filter-field';

interface SearchFiltersProps {
  searchParams: SearchParams;
  onParamChange: (field: keyof SearchParams, value: string) => void;
}

export function SearchFilters({
  searchParams,
  onParamChange,
}: SearchFiltersProps) {
  const entidadeOptions = [
    { value: 'prefeitura', label: 'Prefeitura Municipal' },
    { value: 'camara', label: 'Câmara dos Vereadores' },
    { value: 'autarquias', label: 'Autarquias Municipais' },
  ];

  const grupoOptions = [
    { value: 'licitacoes', label: 'Licitações' },
    { value: 'concursos', label: 'Concursos Públicos' },
    { value: 'contratacoes', label: 'Contratações' },
    { value: 'editais', label: 'Editais' },
  ];

  const subgrupoOptions = [
    { value: 'pregão', label: 'Pregão' },
    { value: 'tomada', label: 'Tomada de Preços' },
    { value: 'concurso', label: 'Concurso Público' },
  ];

  const anoOptions = [
    { value: '2024', label: '2024' },
    { value: '2023', label: '2023' },
    { value: '2022', label: '2022' },
    { value: '2021', label: '2021' },
  ];

  return (
    <>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <FilterField
          type="select"
          label="Entidade"
          value={searchParams.entidade}
          onChange={(value) => onParamChange('entidade', value)}
          options={entidadeOptions}
        />

        <FilterField
          type="select"
          label="Grupo"
          value={searchParams.grupo}
          onChange={(value) => onParamChange('grupo', value)}
          options={grupoOptions}
        />

        <FilterField
          type="select"
          label="Sub-Grupo"
          value={searchParams.subgrupo}
          onChange={(value) => onParamChange('subgrupo', value)}
          options={subgrupoOptions}
        />

        <FilterField
          type="select"
          label="Ano"
          value={searchParams.ano}
          onChange={(value) => onParamChange('ano', value)}
          options={anoOptions}
        />
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        <FilterField
          type="date"
          label="Período de"
          value={searchParams.periodoDe}
          onChange={(value) => onParamChange('periodoDe', value)}
          placeholder="Data inicial"
        />

        <FilterField
          type="date"
          label="Até"
          value={searchParams.periodoAte}
          onChange={(value) => onParamChange('periodoAte', value)}
          placeholder="Data final"
        />

        <FilterField
          type="input"
          label="Nº Certificado"
          value={searchParams.certificado}
          onChange={(value) => onParamChange('certificado', value)}
          placeholder="Digite o número"
        />

        <FilterField
          type="input"
          label="Palavra-chave"
          value={searchParams.palavraChave}
          onChange={(value) => onParamChange('palavraChave', value)}
          placeholder="Buscar no conteúdo"
        />
      </div>
    </>
  );
}
