"use client";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

interface LookupItem { id: number; name: string; icon?: string; }

interface LookupSelectProps {
  items: LookupItem[];
  value?: number;
  onValueChange: (value: number | undefined) => void;
  placeholder?: string;
  disabled?: boolean;
}

export function LookupSelect({ items, value, onValueChange, placeholder = "Select...", disabled }: LookupSelectProps) {
  return (
    <Select value={value != null ? String(value) : undefined} onValueChange={(v) => onValueChange(v ? Number(v) : undefined)} disabled={disabled}>
      <SelectTrigger><SelectValue placeholder={placeholder} /></SelectTrigger>
      <SelectContent>
        {items.map((item) => (
          <SelectItem key={item.id} value={String(item.id)}>
            {item.icon && <span className="mr-2">{item.icon}</span>}{item.name}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}
