/**
 * 搜尋工具列元件
 * 提供搜尋輸入框功能
 */

import { Search } from "lucide-react";
import { Input } from "../ui/input";

interface SearchToolbarProps {
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  className?: string;
}

export default function SearchToolbar({
  value,
  onChange,
  placeholder = "搜尋...",
  className = "",
}: SearchToolbarProps) {
  return (
    <div className={`relative ${className}`}>
      <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
      <Input
        type="text"
        placeholder={placeholder}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className="pl-10"
      />
    </div>
  );
}