import React from 'react';
import './ShippingDetails.css';


function ShippingDetails() {
  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"
          />
          <ShippingForm
            title="Delivery Date"
            type="date"
          />
          <ShippingTimeForm
            title="Delivery Time"
          />
          <FAQ
            title="FAQ"
            description="Answers to your delivery-related questions."
          />
        </div>
      </div>
    </section>
  );
}

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

function ShippingTimeForm({ image, title }) {
  return (
    <div className="shipping-form">
      <h3>{title}</h3>
      <select>
        <option>Choose your desired delivery time slot</option>
        <option>8:00 AM - 12:00 PM</option>
        <option>12:00 PM - 4:00 PM</option>
        <option>4:00 PM - 8:00 PM</option>
      </select>
      <a href="#">Contact Us</a>
    </div>
  );
}

function FAQ({ image, title, description }) {
  return (
    <div className="shipping-form">
      <h3>{title}</h3>
      <p>{description}</p>
      <a href="#">Partnered Brands</a>
    </div>
  );
}

export default ShippingDetails;