Ecommerce storefront

import { useState, type FormEvent } from "react";
import { formatPrice } from "./products";
import type { useCart } from "./cart";

export function Cart({ cart, onBack }: { cart: ReturnType<typeof useCart>; onBack: () => void }) {
  const [placed, setPlaced] = useState(false);

  function checkout(e: FormEvent) {
    e.preventDefault();
    // PLACEHOLDER: send the cart to your server, create a Stripe/Razorpay order there, then redirect to the hosted checkout.
    setPlaced(true);
    cart.clear();
  }

  if (placed) {
    return (
      <div className="mx-auto max-w-md text-center">
        <h1 className="text-2xl font-semibold">Order recorded locally</h1>
        <p className="mt-2 text-slate-600">No payment was taken. Wire the checkout form to a payment provider on your server.</p>
        <button type="button" onClick={onBack} className="mt-6 rounded-md bg-slate-900 px-4 py-2 text-sm text-white">
          Continue shopping
        </button>
      </div>
    );
  }

  return (
    <div className="grid gap-8 lg:grid-cols-[1fr_360px]">
      <section>
        <h1 className="text-2xl font-semibold tracking-tight">Your cart</h1>
        {cart.items.length === 0 ? (
          <p className="mt-6 text-slate-500">
            Your cart is empty.{" "}
            <button type="button" onClick={onBack} className="text-blue-600">
              Browse products
            </button>
          </p>
        ) : (
          <ul className="mt-6 divide-y divide-slate-200">
            {cart.items.map((l) => (
              <li key={l.productId} className="flex items-center justify-between gap-4 py-4">
                <div>
                  <p className="font-medium">{l.product.name}</p>
                  <p className="text-sm text-slate-500">{formatPrice(l.product.price)} each</p>
                </div>
                <div className="flex items-center gap-2">
                  <button type="button" onClick={() => cart.setQty(l.productId, l.qty - 1)} className="size-8 rounded-md border border-slate-300" aria-label={"Decrease quantity of " + l.product.name}>
                    −
                  </button>
                  <span className="w-6 text-center text-sm" aria-live="polite">
                    {l.qty}
                  </span>
                  <button type="button" onClick={() => cart.setQty(l.productId, l.qty + 1)} className="size-8 rounded-md border border-slate-300" aria-label={"Increase quantity of " + l.product.name}>
                    +
                  </button>
                </div>
              </li>
            ))}
          </ul>
        )}
      </section>
      <form onSubmit={checkout} className="h-fit space-y-3 rounded-xl border border-slate-200 p-5">
        <h2 className="font-medium">Checkout (placeholder)</h2>
        <label className="block text-sm">
          <span>Email</span>
          <input type="email" required className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2" />
        </label>
        <label className="block text-sm">
          <span>Shipping address</span>
          <textarea required className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2" rows={3} />
        </label>
        <div className="flex justify-between border-t border-slate-200 pt-3 text-sm">
          <span>Total</span>
          <span className="font-semibold">{formatPrice(cart.total)}</span>
        </div>
        <button type="submit" disabled={cart.items.length === 0} className="w-full rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white disabled:opacity-50">
          Place order
        </button>
        <p className="text-xs text-slate-500">No payment provider is connected in this template.</p>
      </form>
    </div>
  );
}