change responsive page doctors & change modal and responsive & responsive page doctor item

components/doctors/modal/Content.js

@@ -1,19 +1,50 @@
 import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
-import Radios from "./Radios";
+import RadioContent from "./RadioContent";
+import { Button, Switch } from "@mui/material";
 
-const specialties = ['چشم پزشکی', 'چشم پزشکی', 'چشم پزشکی', 'چشم پزشکی', 'چشم پزشکی'];
+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 })
+    };
 
-function Content() {
     return (
         <div className="mt-[50px] px-[38px] mb-[32px]">
             <AutoCompleteSelect
+                updateData={(event) => changeData(event.target.innerText, 'expertise')}
                 list={specialties}
+                name='expertise'
                 label='تخصص'
             />
-            <div>
-                <p className="text-[16px] font-medium text-[#3B3B3B]">جنسیت پزشک</p>
-                <Radios group={group1} />
+            <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>
     )