"use client";
import React, { useState } from "react";

const TrackOrder = () => {
  const [orderNumber, setOrderNumber] = useState("");
  const [countryCode, setCountryCode] = useState("");
  const [phoneNumber, setPhoneNumber] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    setCountryCode("");
    setOrderNumber("");
    setPhoneNumber("");

    // Handle form submission here
    console.log("Form submitted:", { orderNumber, countryCode, phoneNumber });
  };

  return (
    <div className="max-w-2xl min-h-[60vh] mx-auto p-6">
      <h2 className="text-3xl font-bold mb-4">Order Lookup</h2>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label
            htmlFor="order-number"
            className="block text-lg my-5 font-medium text-gray-700"
          >
            Order Number *
          </label>
          <input
            type="text"
            id="order-number"
            name="order-number"
            required
            className="mt-1 block w-full p-3 border rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
            value={orderNumber}
            onChange={(e) => setOrderNumber(e.target.value)}
          />
        </div>

        <div>
          <label
            htmlFor="contact"
            className="block text-lg font-medium my-5 text-gray-700"
          >
            Email ID or Phone Number *
          </label>
          <div className="mt-1 flex rounded-md shadow-sm">
            <input
              type="text"
              id="country-code"
              name="country-code"
              placeholder="+1"
              required
              className="flex-shrink-0 p-3 border w-16 rounded-l-md border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 "
              value={countryCode}
              onChange={(e) => setCountryCode(e.target.value)}
            />
            <input
              type="tel"
              id="phone-number"
              name="phone-number"
              placeholder="Phone number"
              required
              className="flex-1 rounded-r-md p-3 border border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
              value={phoneNumber}
              onChange={(e) => setPhoneNumber(e.target.value)}
            />
          </div>
        </div>

        <div>
          <button
            type="submit"
            className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[#AC8C6B] hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
          >
            Track
          </button>
        </div>
      </form>
    </div>
  );
};

export default TrackOrder;