import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import './ShippingDetails.css';

function ShippingDetails() {
  const [address, setAddress] = useState('');
  const [deliveryDate, setDeliveryDate] = useState('');
  const [deliveryTime, setDeliveryTime] = useState('');
  const navigate = useNavigate();

  const handleSubmit = () => {
    navigate(`/delivery-form?address=${address}&deliveryDate=${deliveryDate}&deliveryTime=${deliveryTime}`);
  };

  return (
    <section className="shipping-details">
      <div className="container">
        <h2>Shipping Details</h2>
        <div className="shipping-forms">
          <ShippingForm
            title="Delivery Address"
            inputPlaceholder="Enter your delivery address"
            type="text"
            value={address}
            onChange={(e) => setAddress(e.target.value)}
          />
          <ShippingForm
            title="Delivery Date"
            type="date"
            value={deliveryDate}
            onChange={(e) => setDeliveryDate(e.target.value)}
          />
          <ShippingTimeForm
            title="Delivery Time"
            value={deliveryTime}
            onChange={(e) => setDeliveryTime(e.target.value)}
          />
          <FAQ
            title="FAQ"
            description="Answers to your delivery-related questions."
          />
        </div>
        <button className='button-form' onClick={handleSubmit}>Continue to Delivery Form</button>
      </div>
    </section>
  );
}

function ShippingForm({ title, inputPlaceholder, type, value, onChange }) {
  return (
    <div className="shipping-form">
      <h3>{title}</h3>
      <input type={type} placeholder={inputPlaceholder} value={value} onChange={onChange} />
    </div>
  );
}

function ShippingTimeForm({ title, value, onChange }) {
  return (
    <div className="shipping-form">
      <h3>{title}</h3>
      <select value={value} onChange={(e) => onChange(e.target.value)}>
        <option>Choose your desired delivery time slot</option>
        <option value="8:00 AM - 12:00 PM">8:00 AM - 12:00 PM</option>
        <option value="12:00 PM - 4:00 PM">12:00 PM - 4:00 PM</option>
        <option value="4:00 PM - 8:00 PM">4:00 PM - 8:00 PM</option>
      </select>
    </div>
  );
}

function FAQ({ title, description }) {
  return (
    <div className="shipping-form">
      <h3>{title}</h3>
      <p>{description}</p>
    </div>
  );
}

export default ShippingDetails;