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 EmployeesCardToolbar({
  searchValue,
  onSearchChange,
  onFiltersClick,
}: Props) {
  return (
    <div className="mb-6 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
      <h2 className="text-lg font-bold capitalize text-[#383E49]">All Employee&apos;s</h2>
      <div className="flex flex-wrap items-center gap-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 employees"
          />
        </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>
    </div>
  );
}