"use client";

import type { ReactNode } from "react";
import { Chip } from "@heroui/react";

/**
 * Wraps shared cart content for the full cart page.
 * Full-width main with consistent padding and max-width; mobile-first single column.
 * Optional itemCount shows visible "Shopping cart" heading with item count Chip.
 */
export function CartPageLayout({
  children,
  itemCount,
}: {
  children: ReactNode;
  itemCount?: number;
}) {
  return (
    <main
      className="w-full max-w-full px-4 py-6 md:px-6 lg:mx-auto lg:max-w-5xl lg:px-8"
      aria-label="Shopping cart"
    >
      {itemCount !== undefined && (
        <div className="mb-6 flex items-center gap-3">
          <h1 className="text-2xl font-semibold font-[family-name:var(--font-fraunces)] md:text-3xl">
            Shopping Cart
          </h1>
          <Chip
            size="md"
            variant="soft"
            className="bg-[#e8f7f6] text-[var(--foreground)]"
          >
            {itemCount} {itemCount === 1 ? "item" : "items"}
          </Chip>
        </div>
      )}
      {children}
    </main>
  );
}
