import * as React from 'react'

export interface DropdownInputProps extends React.HTMLProps<HTMLElementTagNameMap['select']> {
  label?: string
}

export const DropdownInput = React.forwardRef<HTMLElementTagNameMap['select'], DropdownInputProps>(
  ({ label, ...etcProps }, forwardedRef) => {
    return (
      <label className="block border rounded overflow-hidden box-border">
        <span className="flex items-center h-3 text-xs -mb-3 relative pointer-events-none pt-1 px-1">
          {label}
        </span>
        <select {...etcProps} ref={forwardedRef} className="w-full bg-black h-10 appearance-none pt-2 px-1" />
      </label>
    )
  }
)

DropdownInput.displayName = 'DropdownInput'