link doctorPage to appointmentPage to book an appointment

src/components/appointmentForm/AppointmentForm.jsx

@@ -134,9 +134,7 @@ function BookAppointment() {
                 onChange={handleInputChange}
                 value={selectedReason}
                 type="text"
-                placeholder="Enter-reason"
-                id="image"
-                name="image"
+                placeholder="Enter the reason"
                 required
               />
             </div>

src/components/doctors/DoctorDetails.jsx

@@ -1,13 +1,29 @@
+import { useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { FaArrowLeft } from 'react-icons/fa';
 import styles from './doctorDetails.module.css';
+import { createAppointment } from '../../redux/appointment/appointmentsSlice';
 
 function DoctorDetails() {
   const { doctors } = useSelector((state) => state.doctors);
   const { id } = useParams();
   const doctor = doctors.doctors.find((p) => p.id === Number(id));
   const navigate = useNavigate();
+  const [doctorId] = useState();
+
+  const dispatch = useDispatch();
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    const dataAppointment = {
+      appointment: {
+        doctor_id: doctorId,
+      },
+    };
+    dispatch(createAppointment(dataAppointment));
+    navigate('/doctors/book-appointment');
+  };
 
   return (
     <section className={styles.container}>
@@ -19,7 +35,7 @@ function DoctorDetails() {
         <h2 className={styles.doctor_name}>{doctor.name}</h2>
         <p>{doctor.bio}</p>
         <p>{doctor.specialization}</p>
-        <button className={styles.reserve_btn} type="button">Book an appointment</button>
+        <button className={styles.reserve_btn} onClick={handleSubmit} type="button">Book an appointment</button>
       </div>
     </section>
   );