import { ComponentProps, forwardRef } from 'react';
import { cx } from 'class-variance-authority';
import * as SelectPrimitives from '@radix-ui/react-select';

export type SelectItemRef = HTMLDivElement;
export type SelectItemProps = ComponentProps<typeof SelectPrimitives.Item>;

export const SelectItem = forwardRef<SelectItemRef, SelectItemProps>((props, ref) => {
  const { children, className, ...delegated } = props;

  return (
    <SelectPrimitives.Item className={cx('c-select-item', className)} ref={ref} {...delegated}>
      <SelectPrimitives.ItemText>{children}</SelectPrimitives.ItemText>
      <SelectPrimitives.ItemIndicator />
    </SelectPrimitives.Item>
  );
});

SelectItem.displayName = 'SelectItem';
