import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import type { WorkFiltersProps } from "./types";
import { formatTypeName } from "./utils";

export function WorkFilters({
  filters,
  years,
  languages,
  workTypes,
  hasActiveFilters,
  onFilterChange,
  onClear,
  className,
}: WorkFiltersProps) {
  return (
    <div className={cn("flex items-center gap-3 flex-wrap", className)}>
      <Select
        value={filters.selectedWorkType || "all_types"}
        onValueChange={(value) =>
          onFilterChange(
            "selectedWorkType",
            value === "all_types" ? null : value
          )
        }
      >
        <SelectTrigger className="w-[130px] text-sm h-9">
          <SelectValue placeholder="Work Type" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="all_types">All Types</SelectItem>
          {workTypes.map((type) => (
            <SelectItem key={type} value={type}>
              {formatTypeName(type)}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>

      <Select
        value={filters.selectedYear || "all_years"}
        onValueChange={(value) =>
          onFilterChange("selectedYear", value === "all_years" ? null : value)
        }
      >
        <SelectTrigger className="w-[130px] text-sm h-9">
          <SelectValue placeholder="Year" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="all_years">All Years</SelectItem>
          {years
            .sort((a, b) => parseInt(a) - parseInt(b))
            .map((year) => (
              <SelectItem key={year} value={year}>
                {year}
              </SelectItem>
            ))}
        </SelectContent>
      </Select>

      <Select
        value={filters.selectedLanguage || "all_languages"}
        onValueChange={(value) =>
          onFilterChange(
            "selectedLanguage",
            value === "all_languages" ? null : value
          )
        }
      >
        <SelectTrigger className="w-[130px] text-sm h-9">
          <SelectValue placeholder="Language" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="all_languages">All Languages</SelectItem>
          {languages.map((language) => (
            <SelectItem key={language} value={language}>
              {language}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>

      {hasActiveFilters && (
        <Button variant="ghost" size="sm" className="h-9" onClick={onClear}>
          Clear
        </Button>
      )}
    </div>
  );
}
