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

type selectFieldProps = {
    label : string;
    type : string;
    icon : React.ElementType;
    options : {value : string, name : string}[];
    value : string;
    onChange : (event: React.ChangeEvent<HTMLSelectElement>) => void;
}

const SelectField = ( {label, options, icon : Icon, value, onChange} : selectFieldProps) => {

    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-12 flex flex-row items-center  border-2 px-3 mr-3 ${ isFocus ? ' border-deeba-main' : ' border-grey-darkest'}`}>
                        <Icon className="flex-none" color = {isFocus ?"#d3b231" : "#4d4d4d"}/>
                        <select className="w-full h-11 bg-transparent  px-3 flex items-end text-base text-grey-text "  onFocus={fieldFocus} onBlur={fieldFocus} value={value} onChange={onChange}>
                            {
                                options.map((key, index) => (
                                    <option className="pt-2" key={index} value={key.value}>{key.name}</option>
                                ))
                            }
                        </select>
                    </div>  
        </div>  
    )
}

export default SelectField