"use client"
import { useState } from "react"
import React from "react"

type textAreaFieldProps = {
    label : string;
    type : string;
    icon : React.ElementType;
    name : string
}

const TextAreaField = ( {label,  name} : textAreaFieldProps) => {

    const [isFocus, setFocus] = useState<boolean>(false)

    const fieldFocus = () => {
        console.log("on focus!!")
        const is_focus = !isFocus
        setFocus(is_focus)
    } 

    return (
        <div className="  flex flex-col mr-4 mb-4">
                    <label className="text-lg">{label}</label>
                    <div className= {`w-full h-28 flex flex-row items-start border-deeba-main border-2 px-3 mr-3${ isFocus ? ' border-bubble-gum' : ' border-grey-darkest'}`}>
                        
                        <textarea name={name} className="w-full h-24  outline-none mx-3  flex items-end text-lg mt-2"  onFocus={fieldFocus} onBlur={fieldFocus} />
                    </div>  
        </div>  
    )
}

export default TextAreaField