import { useStyleConfig } from '../core'
import Label from '../label'
import { isString } from '../utils'
import { useSelectContext } from './context'
import { SelectLabelProps } from './select.types'

export const SelectLabel = ({ disabled, id, label, labelMarkOptional, labelTooltipText }: SelectLabelProps) => {
  const styles = useStyleConfig('Select', useSelectContext())
  return isString(label) ? (
    <Label
      aria-disabled={disabled}
      className="vui-input-label"
      htmlFor={id}
      markAsOptional={labelMarkOptional}
      mb={0.5}
      text={label}
      tooltipText={labelTooltipText}
      {...styles.label}
    />
  ) : (
    label
  )
}

SelectLabel.displayName = 'SelectLabel'

export default SelectLabel
