"use client";

import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Search, Filter, ArrowUpDown } from "lucide-react";

interface RulesSearchBarProps {
  searchQuery: string;
  onSearchChange: (value: string) => void;
  sortBy: "count" | "amount" | "name";
  onSortChange: (value: "count" | "amount" | "name") => void;
  filterMinCount: number;
  onFilterMinCountChange: (value: number) => void;
}

export function RulesSearchBar({
  searchQuery,
  onSearchChange,
  sortBy,
  onSortChange,
  filterMinCount,
  onFilterMinCountChange,
}: RulesSearchBarProps) {
  return (
    <div className="flex flex-col gap-2 md:gap-3 mb-4 md:mb-6">
      <div className="relative flex-1">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 md:h-4 md:w-4 text-muted-foreground" />
        <Input
          placeholder="Rechercher..."
          value={searchQuery}
          onChange={(e) => onSearchChange(e.target.value)}
          className="pl-9 md:pl-10 text-sm md:text-base"
        />
      </div>

      <div className="flex gap-2 md:gap-3 flex-wrap">
        <Select
          value={sortBy}
          onValueChange={(v) => onSortChange(v as "count" | "amount" | "name")}
        >
          <SelectTrigger className="w-full md:w-44 text-sm">
            <ArrowUpDown className="h-3.5 w-3.5 md:h-4 md:w-4 mr-2" />
            <SelectValue placeholder="Trier par" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="count">Nombre de transactions</SelectItem>
            <SelectItem value="amount">Montant total</SelectItem>
            <SelectItem value="name">Nom</SelectItem>
          </SelectContent>
        </Select>

        <Select
          value={filterMinCount.toString()}
          onValueChange={(v) => onFilterMinCountChange(parseInt(v))}
        >
          <SelectTrigger className="w-full md:w-36 text-sm">
            <Filter className="h-3.5 w-3.5 md:h-4 md:w-4 mr-2" />
            <SelectValue placeholder="Minimum" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="1">1+ transactions</SelectItem>
            <SelectItem value="2">2+ transactions</SelectItem>
            <SelectItem value="3">3+ transactions</SelectItem>
            <SelectItem value="5">5+ transactions</SelectItem>
            <SelectItem value="10">10+ transactions</SelectItem>
          </SelectContent>
        </Select>
      </div>
    </div>
  );
}