/**
 * 庫存篩選工具列
 * 包含搜尋框和產品類型篩選
 */

import { Search, Filter } from "lucide-react";
import { Input } from "@/Components/ui/input";
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="flex flex-col md:flex-row gap-4 items-start md:items-center justify-between p-4 bg-white rounded-lg border shadow-sm">
            <div className="relative w-full md:max-w-md">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
                <Input
                    placeholder="搜尋商品名稱或批號..."
                    value={searchTerm}
                    onChange={(e) => onSearchChange(e.target.value)}
                    className="pl-10"
                />
            </div>

            <div className="flex items-center gap-3 w-full md:w-auto">
                <div className="flex items-center gap-2 text-sm text-gray-500 whitespace-nowrap">
                    <Filter className="h-4 w-4" />
                    <span>篩選類型：</span>
                </div>
                <Select value={typeFilter} onValueChange={onTypeFilterChange}>
                    <SelectTrigger className="w-full md:w-[180px]">
                        <SelectValue placeholder="所有類型" />
                    </SelectTrigger>
                    <SelectContent>
                        <SelectItem value="all">所有類型</SelectItem>
                        <SelectItem value="原物料">原物料</SelectItem>
                        <SelectItem value="半成品">半成品</SelectItem>
                        <SelectItem value="成品">成品</SelectItem>
                    </SelectContent>
                </Select>
            </div>
        </div>
    );
}