import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { CalendarDays, Filter, Search } from "lucide-react";

type Props = {
  searchValue: string;
  onSearchChange: (value: string) => void;
  onFiltersClick?: () => void;
};

export default function CandidatesSearchFilters({
  searchValue,
  onSearchChange,
  onFiltersClick,
}: Props) {
  return (
    <div className="flex shrink-0 flex-wrap items-center gap-3 lg:pb-3">
      <div className="flex h-9 min-w-[176px] max-w-full flex-1 items-center gap-2 rounded border border-[#CFD3D4] px-2 sm:flex-initial sm:min-w-[200px]">
        <Search className="size-4 shrink-0 text-[#ABAFB1]" aria-hidden />
        <Input
          type="search"
          placeholder="Search"
          value={searchValue}
          onChange={(e) => onSearchChange(e.target.value)}
          className="h-8 border-0 bg-transparent p-0 text-xs text-[#383E49] placeholder:text-[#ABAFB1] focus-visible:ring-0"
          aria-label="Search candidates"
        />
      </div>
      <Button
        type="button"
        variant="outline"
        className="h-9 gap-1 rounded-md border-[#E0E0E0] bg-[#FCFCFC] px-4 text-sm font-medium text-[#4F4F4F] hover:bg-[#FCFCFC]"
        onClick={onFiltersClick}
      >
        <Filter className="size-4" aria-hidden />
        Filters
      </Button>
      <Button
        type="button"
        variant="outline"
        className="h-9 gap-1 rounded-md border-[#E0E0E0] bg-[#FCFCFC] px-4 text-sm font-medium capitalize text-[#858C94] hover:bg-[#FCFCFC]"
      >
        <CalendarDays className="size-4" aria-hidden />
        filters
      </Button>
    </div>
  );
}