import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect"
import ContentText from "@/components/panel/ContentText"
import { numberOfTurns, timeOfEachTurn } from "./listSelector"
import { useState } from "react";

function Form() {

    const [selected, setSelected] = useState({
        numberOfTurns: '',
        timeOfEachTurn: '',
    });

    const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })

    return (
        <div className="mt-[40px] grid grid-cols-2 gap-x-[48px] gap-y-[24px]">
            <ContentText text='تعداد نوبت در هر روز'>
                <AutoCompleteSelect
                    updateData={updateSelect}
                    label='انتخاب کنید...'
                    name='numberOfTurns'
                    list={numberOfTurns}
                />
            </ContentText>
            <ContentText text='زمان هر نوبت'>
                <AutoCompleteSelect
                    updateData={updateSelect}
                    label='انتخاب کنید...'
                    name='timeOfEachTurn'
                    list={timeOfEachTurn}
                />
            </ContentText>
        </div>
    )
}

export default Form