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

type inputFieldProps = {
    label : string;
    type : string;
    icon : React.ElementType;
    required : boolean;
    placeHolder : string;
    name : string;
}

const InputField = ( {label, type, icon : Icon, required, placeHolder, name} : inputFieldProps) => {

    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-3 md:mb-4">
                    <label className="text-base md:text-lg text-grey-darker">{label}</label>
                    <div className= {`w-full h-12 flex flex-row items-center   border-2 px-3 mr-3 ${ isFocus ? ' border-deeba-main' : ' border-grey-text'}`}>
                        <Icon className="flex-none" color = {isFocus ?"#d3b231" : "#4d4d4d"} />
                        <input className="w-full h-4 outline-none px-3 pt-2 flex items-end text-base leading-none text-grey-text" placeholder={placeHolder} type={type} onFocus={fieldFocus} onBlur={fieldFocus} required={required} name={name}/>
                    </div>  
        </div>  
    )
}

export default InputField