/**
 * 庫存工具列元件
 * 包含搜尋和篩選功能
 */

import { Filter } from "lucide-react";
import SearchToolbar from "@/Components/shared/SearchToolbar";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/Components/ui/select";

interface InventoryToolbarProps {
  searchTerm: string;
  onSearchChange: (value: string) => void;
  typeFilter: string;
  onTypeFilterChange: (value: string) => void;
}

export default function InventoryToolbar({
  searchTerm,
  onSearchChange,
  typeFilter,
  onTypeFilterChange,
}: InventoryToolbarProps) {
  return (
    <div className="bg-white rounded-lg shadow-sm border p-4">
      <div className="flex flex-col sm:flex-row gap-4">
        {/* 搜尋框 */}
        <SearchToolbar
          value={searchTerm}
          onChange={onSearchChange}
          placeholder="搜尋商品名稱或批號..."
          className="flex-1"
        />

        {/* 類型篩選 */}
        <div className="w-full sm:w-56">
          <Select value={typeFilter} onValueChange={onTypeFilterChange}>
            <SelectTrigger className="border-gray-300">
              <div className="flex items-center gap-2">
                <Filter className="h-4 w-4 text-gray-400" />
                <SelectValue placeholder="篩選類型" />
              </div>
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">全部類型</SelectItem>
              <SelectItem value="原物料">原物料</SelectItem>
              <SelectItem value="半成品">半成品</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>
    </div>
  );
}