/**
 * 倉庫類別篩選器元件
 */

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

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

const WAREHOUSE_TYPES: Array<{ value: string; label: string }> = [
  { value: "all", label: "全部類別" },
  { value: "中央倉庫", label: "中央倉庫" },
  { value: "門市", label: "門市" },
];

export default function WarehouseFilter({
  value,
  onChange,
  className = "",
}: WarehouseFilterProps) {
  return (
    <div className={className}>
      <Select value={value} onValueChange={onChange}>
        <SelectTrigger>
          <div className="flex items-center gap-2">
            <Filter className="h-4 w-4 text-gray-400" />
            <SelectValue placeholder="選擇類別" />
          </div>
        </SelectTrigger>
        <SelectContent>
          {WAREHOUSE_TYPES.map((type) => (
            <SelectItem key={type.value} value={type.value}>
              {type.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  );
}