"use client";

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

interface ProductToolbarProps {
  searchQuery: string;
  onSearchChange: (query: string) => void;
  selectedCategory: string;
  categories: Category[];
  onCategoryChange: (categoryId: string) => void;
}

export default function ProductToolbar({
  searchQuery,
  onSearchChange,
  selectedCategory,
  categories,
  onCategoryChange,
}: ProductToolbarProps) {
  return (
    <div className="flex flex-col sm:flex-row gap-3">
      <div className="relative flex-1">
        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
        <Input
          placeholder="Search by name, SKU, or barcode…"
          value={searchQuery}
          onChange={(e) => onSearchChange(e.target.value)}
          className="pl-8"
        />
      </div>
      <Select
        items={[
          { value: "all", label: "All Categories" },
          ...categories.map((category) => ({
            value: category.id,
            label: category.name,
          })),
        ]}
        onValueChange={(val) => onCategoryChange((val as string) ?? "all")}
      >
        <SelectTrigger className="w-full sm:w-45">
          <SelectValue placeholder="All Categories" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="all">All Categories</SelectItem>
          {categories.map((category) => (
            <SelectItem key={category.id} value={category.id}>
              {category.name}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  );
}