import { useState } from "react";
import { menuCategories } from "../data/menuData";

export default function OrderForm() {
  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");
  const [address, setAddress] = useState("");
  const [dish, setDish] = useState("");
  const [quantity, setQuantity] = useState("");

  const sendToWhatsApp = () => {
    const message = `
🍽️ New Order - Diamond Star Dhaba

Name: ${name}
Phone: ${phone}
Address: ${address}

Dish: ${dish}
Quantity: ${quantity}
`;

    window.open(
      `https://wa.me/91 9026531860?text=${encodeURIComponent(message)}`,
      "_blank"
    );
  };

  return (
    <section id="orderform" className="py-16 px-6 bg-white">
      <h2 className="text-4xl font-bold text-center mb-8">
        Order Online
      </h2>

      <div className="max-w-xl mx-auto space-y-4">

        {/* Name */}
        <input
          type="text"
          placeholder="Customer Name"
          className="w-full border p-3 rounded"
          onChange={(e) => setName(e.target.value)}
        />

        {/* Phone */}
        <input
          type="tel"
          placeholder="Phone Number"
          className="w-full border p-3 rounded"
          onChange={(e) => setPhone(e.target.value)}
        />

        {/* Address */}
        <textarea
          placeholder="Delivery Address"
          className="w-full border p-3 rounded"
          rows="4"
          onChange={(e) => setAddress(e.target.value)}
        />

        {/* Dish Select */}
        <select
          className="w-full border p-3 rounded"
          value={dish}
          onChange={(e) => setDish(e.target.value)}
        >
          <option value="">Select Dish</option>

          {menuCategories.map((category) =>
            category.items.map((item) => (
              <option key={item.id} value={item.name}>
                {item.name}
              </option>
            ))
          )}
        </select>

        {/* Quantity */}
        <input
          type="number"
          placeholder="Quantity"
          className="w-full border p-3 rounded"
          onChange={(e) => setQuantity(e.target.value)}
        />

        {/* Button */}
        <button
          onClick={sendToWhatsApp}
          className="w-full bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg transition"
        >
          Order on WhatsApp
        </button>

      </div>
    </section>
  );
}