Filtering — Category ও Status

"use client";

import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const CATEGORIES = ["electronics", "clothing", "books", "food"];

export function ProductFilters({
  searchInput,
  onSearchChange,
  category,
  onCategoryChange,
  status,
  onStatusChange,
}) {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Input
        value={searchInput}
        onChange={(e) => onSearchChange(e.target.value)}
        placeholder="খুঁজুন…"
        className="w-56"
      />

      <Select value={category === undefined ? "all" : category}
        onValueChange={(v) => onCategoryChange(v === "all" ? undefined : v)}>
        <SelectTrigger className="w-36">
          <SelectValue placeholder="Category" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="all">সব category</SelectItem>
          {CATEGORIES.map((c) => (
            <SelectItem key={c} value={c}>{c}</SelectItem>
          ))}
        </SelectContent>
      </Select>

      <Select value={status ?? "all"}
        onValueChange={(v) => onStatusChange(v === "all" ? undefined : v)}>
        <SelectTrigger className="w-36">
          <SelectValue placeholder="Status" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="all">সব status</SelectItem>
          <SelectItem value="active">Active</SelectItem>
          <SelectItem value="inactive">Inactive</SelectItem>
        </SelectContent>
      </Select>
    </div>
  );
}

// একসাথে সব filter effect: filter বদলে ১ম পেজে
useEffect(() => {
  setPage(1);
}, [search, category, status]);