/**
 * 廠商搜尋列元件
 */

import { Search, Plus } from "lucide-react";
import { Input } from "@/Components/ui/input";
import { Button } from "@/Components/ui/button";

interface VendorSearchBarProps {
    searchQuery: string;
    onSearchChange: (query: string) => void;
    onAddClick: () => void;
}

export default function VendorSearchBar({
    searchQuery,
    onSearchChange,
    onAddClick,
}: VendorSearchBarProps) {
    return (
        <div className="flex justify-between items-center">
            <div className="relative flex-1 max-w-md">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
                <Input
                    placeholder="搜尋廠商名稱 / 聯絡人 / Email"
                    value={searchQuery}
                    onChange={(e) => onSearchChange(e.target.value)}
                    className="pl-9 input-outlined-primary"
                />
            </div>
            <Button onClick={onAddClick} className="gap-2 button-filled-primary">
                <Plus className="h-4 w-4" />
                新增廠商
            </Button>
        </div>
    );
}