import { useCart, DISTRICTS } from "@/context/CartContext";

interface ShippingAddressFormProps {
  address: string;
  setAddress: (val: string) => void;
  area: string;
  setArea: (val: string) => void;
  note: string;
  setNote: (val: string) => void;
  errors: {
    address?: string;
    area?: string;
    city?: string;
  };
}

export default function ShippingAddressForm({
  address,
  setAddress,
  area,
  setArea,
  note,
  setNote,
  errors,
}: ShippingAddressFormProps) {
  const { city, setCity } = useCart();

  return (
    <div className="bg-white dark:bg-zinc-900 border border-slate-100 dark:border-zinc-800/80 rounded-2xl p-5 shadow-xs space-y-3">
      <h2 className="text-sm font-extrabold text-slate-900 dark:text-zinc-100 uppercase tracking-wide border-b border-slate-100 dark:border-zinc-800 pb-2">
        2. Shipping Address
      </h2>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        <div className="space-y-1 md:col-span-2">
          <label className="text-[10px] font-bold uppercase tracking-wider text-slate-400 block">
            Delivery Address *
          </label>
          <input
            type="text"

            placeholder="House, Flat, Street address"
            value={address}
            onChange={(e) => setAddress(e.target.value)}
            className={`w-full h-9 px-3.5 rounded-xl border bg-white dark:bg-zinc-950 text-xs font-semibold focus:outline-none ${errors.address
              ? "border-red-500 focus:border-red-500"
              : "border-slate-200 dark:border-zinc-800 focus:border-brand-accent"
              }`}
          />
          {errors.address && (
            <p className="text-red-500 text-[10px] font-bold mt-1 pl-1">
              {errors.address}
            </p>
          )}
        </div>
        <div className="space-y-1">
          <label className="text-[10px] font-bold uppercase tracking-wider text-slate-400 block">
            Area *
          </label>
          <input
            type="text"
            placeholder="e.g. Uttara, Banani"
            value={area}
            onChange={(e) => setArea(e.target.value)}
            className={`w-full h-9 px-3.5 rounded-xl border bg-white dark:bg-zinc-950 text-xs font-semibold focus:outline-none ${errors.area
              ? "border-red-500 focus:border-red-500"
              : "border-slate-200 dark:border-zinc-800 focus:border-brand-accent"
              }`}
          />
          {errors.area && (
            <p className="text-red-500 text-[10px] font-bold mt-1 pl-1">
              {errors.area}
            </p>
          )}
        </div>
        <div className="space-y-1">
          <label className="text-[10px] font-bold uppercase tracking-wider text-slate-400 block">
            District *
          </label>
          <div className="relative">
            <select
              value={city}
              onChange={(e) => setCity(e.target.value)}
              className={`w-full h-9 pl-3.5 pr-10 rounded-xl border bg-white dark:bg-zinc-950 text-xs font-bold focus:outline-none cursor-pointer appearance-none ${errors.city
                ? "border-red-500 focus:border-red-500"
                : "border-slate-200 dark:border-zinc-800 focus:border-brand-accent"
                }`}
            >
              <option value="">Select District</option>
              {DISTRICTS.map((d) => (
                <option key={d.value} value={d.value}>
                  {d.name}
                </option>
              ))}
            </select>
            <div className="absolute inset-y-0 right-0 flex items-center pr-3.5 pointer-events-none">
              <svg
                className="w-3.5 h-3.5 text-slate-500 dark:text-zinc-400"
                fill="none"
                stroke="currentColor"
                strokeWidth="2.5"
                viewBox="0 0 24 24"
              >
                <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
              </svg>
            </div>
          </div>
          {errors.city && (
            <p className="text-red-500 text-[10px] font-bold mt-1 pl-1">
              {errors.city}
            </p>
          )}
        </div>
        <div className="space-y-1 md:col-span-2">
          <label className="text-[10px] font-bold uppercase tracking-wider text-slate-400 block">
            Order Note (Optional)
          </label>
          <input
            type="text"
            placeholder="Any special instructions for delivery..."
            value={note}
            onChange={(e) => setNote(e.target.value)}
            className="w-full h-9 px-3.5 rounded-xl border border-slate-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 text-xs font-semibold focus:border-brand-accent focus:outline-none"
          />
        </div>
      </div>
    </div>
  );
}