import { Label, ListBox, Select } from '@heroui/react';
import { XMarkIcon } from '@heroicons/react/24/solid';

interface Option {
    id: string | number;
    label: string;
}

interface SelectFieldProps {
    label: string;
    items: Option[];
    selectedKey?: string | number | null;
    onSelectionChange: (key: string | number | null) => void;
    placeholder?: string;
    isDisabled?: boolean;
    clearable?: boolean;
}

export function SelectField({ label, items, selectedKey, onSelectionChange, placeholder = 'Pilih...', isDisabled, clearable }: SelectFieldProps) {
    return (
        <Select
            selectedKey={selectedKey ?? null}
            onSelectionChange={(key: any) => onSelectionChange(key)}
            items={items as any}
            isDisabled={isDisabled}
            fullWidth
        >
            <Label>{label}</Label>
            <Select.Trigger>
                <Select.Value>
                    {({ selectedItem }: any) => selectedItem?.label ?? placeholder}
                </Select.Value>
                {clearable && selectedKey != null && (
                    <span
                        role="button"
                        tabIndex={-1}
                        onPointerDown={(e) => { e.stopPropagation(); e.preventDefault(); onSelectionChange(null); }}
                        aria-label={`Hapus pilihan ${label}`}
                        className="text-gray-400 hover:text-gray-600 shrink-0"
                    >
                        <XMarkIcon className="w-4 h-4" />
                    </span>
                )}
                <Select.Indicator />
            </Select.Trigger>
            <Select.Popover>
                <ListBox items={items}>
                    {(item: Option) => <ListBox.Item id={item.id}>{item.label}</ListBox.Item>}
                </ListBox>
            </Select.Popover>
        </Select>
    );
}