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 ProjectsCardToolbar({ searchValue, onSearchChange, onFiltersClick }: Props) {
  return (
    <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
      <h2 className="shrink-0 text-lg font-bold text-[#383E49]">Projects</h2>
      <div className="flex min-w-0 flex-1 flex-wrap items-center justify-end gap-3 lg:justify-end">
        <div className="flex h-9 min-w-0 flex-1 items-center gap-2 rounded border border-[#CFD3D4] px-2 sm:min-w-[200px] sm:max-w-md">
          <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 projects"
          />
        </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>
  );
}