"use client";

import Link from "next/link";

const SHOP_PATH = "/shop";

/**
 * Empty cart state with shopping bag icon, message, and CTA.
 * Mobile-first: full-width CTA on mobile, auto on tablet+.
 */
export function CartEmptyState({ onClose }: { onClose?: () => void }) {
  return (
    <section
      aria-labelledby="cart-empty-heading"
      className="flex flex-col items-center justify-center gap-5 py-10 text-center"
    >
      <div className="flex size-20 items-center justify-center rounded-full bg-[#e8f7f6]">
        <ShoppingBagIcon />
      </div>
      <div className="flex flex-col gap-1">
        <h2
          id="cart-empty-heading"
          className="text-lg font-semibold font-[family-name:var(--font-fraunces)] text-[var(--foreground)]"
        >
          Your cart is empty
        </h2>
        <p className="text-sm text-[var(--muted)]">
          Looks like you haven&apos;t added anything yet.
        </p>
      </div>
      <Link
        href={SHOP_PATH}
        onClick={() => onClose?.()}
        className="flex h-11 w-full items-center justify-center rounded-full bg-[#f4a13a] px-8 font-medium text-[#1a2e2d] transition-colors hover:bg-[#e8932e] md:w-auto"
        aria-label="Browse products to add to cart"
      >
        Browse Products
      </Link>
    </section>
  );
}

function ShoppingBagIcon() {
  return (
    <svg
      width="32"
      height="32"
      viewBox="0 0 24 24"
      fill="none"
      stroke="#38a99f"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z" />
      <line x1="3" y1="6" x2="21" y2="6" />
      <path d="M16 10a4 4 0 0 1-8 0" />
    </svg>
  );
}
