import React from 'react'

import { TextareaProps } from './Textarea.types'

import Label from '../Label'

import './Textarea.css'

const Textarea = ({
  autoFocus,
  className,
  disabled,
  icon,
  inputMode,
  label,
  placeholder,
  required,
  tooltip,
  rows,
  value,

  onChange,
}: TextareaProps) => {
  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>
        )}
        <textarea
          autoFocus={autoFocus}
          disabled={disabled}
          inputMode={inputMode}
          onChange={(e) => onChange(e.target.value)}
          placeholder={placeholder}
          value={value}
          rows={rows}
          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 Textarea
