import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
import RadioContent from "./RadioContent";
import { Button, Switch } from "@mui/material";

const specialties = ['چشم پزشکی1', 'چشم پزشکی2', 'چشم پزشکی3', 'چشم پزشکی4', 'چشم پزشکی5'];
const group1 = ['خانم', 'آقا', 'هر دو'];
const group2 = ['فوق تخصص', 'دکترای تخصصی', 'متخصص', 'دکتری'];

const label = { inputProps: { 'aria-label': 'Switch demo' } };

function Content({ data, setData }) {

    const changeData = (value, name) => {
        setData({ ...data, [name]: value })
    };

    return (
        <div className="mt-[50px] px-[38px] mb-[32px]">
            <AutoCompleteSelect
                updateData={(event) => changeData(event.target.innerText, 'expertise')}
                list={specialties}
                name='expertise'
                label='تخصص'
            />
            <div className="mt-[40px] mb-[32px]">
                <RadioContent
                    changeData={(value) => changeData(+value, 'gender')}
                    value={data.gender}
                    text='جنسیت پزشک'
                    group={group1}

                />
                <span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
                <RadioContent
                    changeData={(value) => changeData(+value, 'degree')}
                    value={data.degree}
                    text='درجه علمی'
                    group={group2}
                />
                <span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
                <div className="flex items-center justify-start gap-[12px]">
                    <p className="text-[#3B3B3B] text-[16px] font-medium">فقط پزشکان دارای نوبت</p>
                    <Switch
                        {...label}
                        onChange={event => changeData(event.target.checked, 'turn')}
                    />
                </div>
            </div>
        </div>
    )
}

export default Content