import React from 'react'

import { DateProps } from './Date.types'

import { Label } from '../../components'

import './Date.css'

const Date = ({
  className,
  disabled,
  icon,
  label,
  required,
  tooltip,
  value,

  onChange
}: DateProps) => {
  return (
    <div className='w-full'>
      <Label text={label} tooltip={tooltip} required={required} />
      <span className='relative'>
        {icon && (
          <span className='absolute bg-red-100 flex h-5 items-center justify-center left-1.5 rounded text-red-500 top-1/2 transform -translate-y-1/2 w-5'>
            <i className={`fa-regular ${icon} fa-xs`} />
          </span>
        )}
        <input
          type='date'
          disabled={disabled}
          onChange={e => onChange(e.target.value)}
          value={value}
          className={
            className +
            ' ' +
            (icon && 'pl-8') +
            ' bg-transparent border borer-gray-300 outline-none px-2 py-1 rounded text-sm w-full'
          }
          required={required}
        />
      </span>
    </div>
  )
}

export default Date
