import { Select } from 'radix-ui';
import { Check, ChevronDown, ChevronUp } from 'lucide-react';

interface HistorySelectProps {
  label: string;
  value: string;
  options: { value: string; label: string; detail?: string }[];
  onChange: (value: string) => void;
}

export function HistorySelect({ label, value, options, onChange }: HistorySelectProps) {
  return <Select.Root value={value} onValueChange={onChange}>
    <Select.Trigger className="asset-history-select" aria-label={label}>
      <Select.Value />
      <Select.Icon className="asset-history-select-icon"><ChevronDown size={14} /></Select.Icon>
    </Select.Trigger>
    <Select.Portal>
      <Select.Content className="asset-history-select-menu" position="popper" align="start" sideOffset={6} collisionPadding={10}>
        <Select.ScrollUpButton className="asset-history-select-scroll"><ChevronUp size={14} /></Select.ScrollUpButton>
        <Select.Viewport className="asset-history-select-options">
          {options.map(option => <Select.Item className="asset-history-select-option" key={option.value} value={option.value} textValue={option.label}>
            <Select.ItemText>{option.label}</Select.ItemText>
            {option.detail && <span className="asset-history-option-detail">{option.detail}</span>}
            <Select.ItemIndicator className="asset-history-option-check"><Check size={14} /></Select.ItemIndicator>
          </Select.Item>)}
        </Select.Viewport>
        <Select.ScrollDownButton className="asset-history-select-scroll"><ChevronDown size={14} /></Select.ScrollDownButton>
      </Select.Content>
    </Select.Portal>
  </Select.Root>;
}