import { clsx } from 'clsx';
import React from 'react';
import { FORM_CONTROL_BASE_CLASSES } from '@/components/ui/formClasses.ts';

const Select = React.forwardRef<HTMLSelectElement, React.SelectHTMLAttributes<HTMLSelectElement>>(
  ({ className, children, ...props }, ref) => {
    return (
      <select
        ref={ref}
        className={clsx(
          'flex h-10 items-center justify-between text-left',
          FORM_CONTROL_BASE_CLASSES,
          '[&>span]:line-clamp-1',
          className
        )}
        {...props}
      >
        {children}
      </select>
    );
  }
);

Select.displayName = 'Select';

export default Select;