import { type FC, type InputHTMLAttributes } from 'react'
import Error from './Error'
import { clx } from '../helpers/utils'

type Props = {
    label?: string,
    error_text?: string
    isNotRequired?: boolean
} & InputHTMLAttributes<HTMLTextAreaElement>

const Textarea: FC<Props> = (props: Props) => {
    return (
        <div className='w-full relative'>
            {
                props.label &&
                <div className='flex items-center gap-1'>
                    <div className='text-sm'>{props.label}</div>
                    {props.isNotRequired && (
                        <span className='text-xs text-description'>(اختیاری)</span>
                    )}
                </div>
            }

            <textarea
                {...props}
                className={clx(
                    'border border-border leading-7 w-full rounded-xl px-4 py-3 min-h-[100px] mt-1 text-xs',
                    props.className
                )}
            >

            </textarea>

            {
                props.error_text &&
                <Error errorText={props.error_text} />
            }

        </div>
    )
}

export default Textarea