"use client";

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

interface TreeSearchControlsProps {
  searchTerm: string;
  onSearchChange: (value: string) => void;
  onExpandAll: () => void;
  onCollapseAll: () => void;
  placeholder?: string;
}

export function TreeSearchControls({
  searchTerm,
  onSearchChange,
  onExpandAll,
  onCollapseAll,
  placeholder = "Rechercher...",
}: TreeSearchControlsProps) {
  return (
    <div className="flex flex-col sm:flex-row gap-3">
      <div className="relative flex-1">
        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 w-4 h-4" />
        <Input
          placeholder={placeholder}
          value={searchTerm}
          onChange={(e) => onSearchChange(e.target.value)}
          className="pl-10"
        />
      </div>
      <div className="flex gap-2">
        <Button
          variant="outline"
          size="sm"
          onClick={onExpandAll}
          className="text-slate-400 hover:text-white"
        >
          Tout ouvrir
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={onCollapseAll}
          className="text-slate-400 hover:text-white"
        >
          Tout fermer
        </Button>
      </div>
    </div>
  );
}