"use client";

import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { LookupSelect } from "@/components/shared/lookup-select";
import { useContractorSpecialties } from "@/lib/hooks/use-lookups";
import { Search, Star } from "lucide-react";
import { cn } from "@/lib/utils";

interface ContractorFiltersProps {
  search: string;
  onSearchChange: (value: string) => void;
  specialtyId: number | undefined;
  onSpecialtyChange: (value: number | undefined) => void;
  favoritesOnly: boolean;
  onFavoritesOnlyChange: (value: boolean) => void;
}

export function ContractorFilters({
  search,
  onSearchChange,
  specialtyId,
  onSpecialtyChange,
  favoritesOnly,
  onFavoritesOnlyChange,
}: ContractorFiltersProps) {
  const { data: specialties } = useContractorSpecialties();

  return (
    <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
      {/* Search */}
      <div className="relative flex-1">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
        <Input
          placeholder="Search by name or company..."
          value={search}
          onChange={(e) => onSearchChange(e.target.value)}
          className="pl-9"
        />
      </div>

      {/* Specialty filter */}
      <div className="w-full sm:w-48">
        <LookupSelect
          items={specialties}
          value={specialtyId}
          onValueChange={onSpecialtyChange}
          placeholder="All specialties"
        />
      </div>

      {/* Favorites toggle */}
      <Button
        variant={favoritesOnly ? "default" : "outline"}
        size="sm"
        onClick={() => onFavoritesOnlyChange(!favoritesOnly)}
        className={cn("gap-1.5", favoritesOnly && "bg-yellow-500 hover:bg-yellow-600 text-white")}
      >
        <Star className={cn("size-4", favoritesOnly && "fill-white")} />
        Favorites
      </Button>
    </div>
  );
}
