import { type ComponentPropsWithoutRef } from 'react';
import { Select as RSelect } from 'radix-ui';
import { Check, CaretDown } from '@phosphor-icons/react';

type SelectProps = ComponentPropsWithoutRef<typeof RSelect.Root> & {
  placeholder?: string;
  items: Array<{ value: string; label: string }>;
  'aria-label'?: string;
};

export const Select = ({ placeholder, items, ...rest }: SelectProps) => (
  <RSelect.Root {...rest}>
    <RSelect.Trigger className="modern-sk-select" aria-label={rest['aria-label']}>
      <RSelect.Value placeholder={placeholder} />
      <RSelect.Icon className="modern-sk-select__icon">
        <CaretDown size={12} weight="bold" />
      </RSelect.Icon>
    </RSelect.Trigger>
    <RSelect.Portal>
      <RSelect.Content
        className="modern-sk-select__content"
        position="popper"
        sideOffset={6}
      >
        <RSelect.Viewport>
          {items.map((it) => (
            <RSelect.Item
              key={it.value}
              value={it.value}
              className="modern-sk-select__item"
            >
              <RSelect.ItemText>{it.label}</RSelect.ItemText>
              <RSelect.ItemIndicator className="modern-sk-select__item-indicator">
                <Check size={14} weight="bold" />
              </RSelect.ItemIndicator>
            </RSelect.Item>
          ))}
        </RSelect.Viewport>
      </RSelect.Content>
    </RSelect.Portal>
  </RSelect.Root>
);