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

import { Search, Plus } from "lucide-react";
import { Input } from "../ui/input";
import { Button } from "../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>
  );
}
