import React, { useState } from "react";

import Button from "../Button/Button";

import Input from "../Input/Input";
import { toast, ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

const AppointmentForm = ({ onSubmit }) => {

const [formData, setFormData] = useState({
date: "",
time: "",
reason: "",
disease: "",
});

const handleInputChange = (e) => {

const { name, value } = e.target;
setFormData((prevFormData) => ({
...prevFormData,
[name]: value,
}));
};

const handleSubmit = (e) => {

e.preventDefault();
console.log(formData);
toast.success("Appointment booked successfully!");
onSubmit && onSubmit(formData);
};

return (
<div className="background-container">
<div className="forms-container">
<form onSubmit={handleSubmit} className="userform">
<h2 className="userTitle">Book an Appointment</h2>

<Input
name="date"
type="date"
placeholder="Date of Appointment"
label="Date"
value={formData.date}
onChange={handleInputChange}
min={new Date().toISOString().split("T")[0]} // This sets the min date
to today's date
/>

<Input
name="time"
type="time"
placeholder="Time of Appointment"
label="Time"
value={formData.time}
onChange={handleInputChange}
/>
<Input
name="reason"
type="text"
placeholder="Reason for Appointment"
label="Reason"
 value={formData.reason}
onChange={handleInputChange}
/>
<Input
name="disease"
type="text"
placeholder="Disease (Optional)"
label="Disease"
value={formData.disease}
onChange={handleInputChange}
/>
<Button name="Submit" type="submit" className="submitButton" />
<ToastContainer />
</form>
</div>
</div>
);
};

export default AppointmentForm;