"use client";

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

interface CategorySearchBarProps {
  searchQuery: string;
  onSearchChange: (query: string) => void;
  allExpanded: boolean;
  onToggleAll: () => void;
}

export function CategorySearchBar({
  searchQuery,
  onSearchChange,
  allExpanded,
  onToggleAll,
}: CategorySearchBarProps) {
  return (
    <div className="flex items-center gap-3">
      <div className="relative flex-1 max-w-sm">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
        <Input
          placeholder="Rechercher une catégorie ou un mot-clé..."
          value={searchQuery}
          onChange={(e) => onSearchChange(e.target.value)}
          className="pl-9"
        />
        {searchQuery && (
          <button
            onClick={() => onSearchChange("")}
            className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
          >
            <X className="w-4 h-4" />
          </button>
        )}
      </div>
      <Button variant="outline" size="sm" onClick={onToggleAll}>
        <ChevronsUpDown className="w-4 h-4 mr-2" />
        {allExpanded ? "Tout replier" : "Tout déplier"}
      </Button>
    </div>
  );
}