import type { JSX } from 'preact';
import { cn } from './cn';

export type SelectOption = { value: string; label: string; disabled?: boolean };

export type SelectProps = JSX.SelectHTMLAttributes<HTMLSelectElement> & {
  options: SelectOption[];
  value?: string;
  compact?: boolean;
};

export function Select({ className, options, compact = false, ...props }: SelectProps) {
  return (
    <select
      data-asuka-control="select"
      data-asuka-control-size={compact ? 'compact' : 'default'}
      className={cn(
        'ask-theme-select ask-w-full ask-border',
        compact
          ? 'ask-h-8 ask-rounded-lg ask-px-2.5 ask-text-[12px]'
          : 'ask-h-9 ask-rounded-[12px] ask-px-3 ask-text-[13px]',
        className,
      )}
      {...props}
    >
      {options.map((o) => (
        <option key={o.value} value={o.value} disabled={o.disabled}>
          {o.label}
        </option>
      ))}
    </select>
  );
}
