import clsx from 'clsx'
import {forwardRef} from 'react'

export const Select = forwardRef<HTMLSelectElement, JSX.IntrinsicElements['select']>(
  (props, ref) => {
    const {className, children, ...rest} = props

    return (
      <select
        ref={ref}
        className={clsx(
          'bg-canvas-0 text-ink-1000 border-ink-300 focus:border-primary-500 focus:ring-primary-500 h-12 cursor-pointer self-start overflow-hidden rounded-md border pl-4 pr-10 text-sm shadow-sm focus:outline-none',
          className,
        )}
        {...rest}
      >
        {children}
      </select>
    )
  },
)