import React, { useState } from 'react'

import { LabelProps } from './Label.types'

import './Label.css'

const Label = ({ className, required, text, tooltip }: LabelProps) => {
  const [hover, setHover] = useState(false)

  return (
    <label className={className + ' flex font-medium items-center mb-1 text-gray-700 text-xs'}>
      {text}

      {required && <span className='mx-1 text-red-500'>*</span>}

      {tooltip && (
        <span
          className='flex group items-center ml-2'
          onMouseEnter={() => setHover(true)}
          onMouseLeave={() => setHover(false)}
        >
          <i className='fa-regular fa-circle-question cursor-pointer mr-2' />
          {hover && (
            <span className='bg-gray-100 hidden group-hover:inline px-2 rounded text-xs whitespace-nowrap'>
              {tooltip}
            </span>
          )}
        </span>
      )}
    </label>
  )
}

export default Label
