"use client";

import Link from "next/link";
import { CART_PAGE_PATH, CHECKOUT_PAGE_PATH } from "@/lib/cart/constants";

const SHOP_PATH = "/shop";

type CartActionsProps = {
  onCheckout?: () => void;
  onViewFullCart?: () => void;
  /** Dismiss the overlay on any navigation. */
  onClose?: () => void;
  /** "page" = full cart page; "overlay" = drawer/sheet. */
  layout?: "page" | "overlay";
};

/**
 * Cart CTA buttons. Uses Next.js Link for all internal routes per hero-ui-usage rules.
 * Styled to match PetPaws branding: Amber checkout CTA, outline/ghost secondaries.
 * Every link calls onClose so the overlay dismisses on navigation.
 */
export function CartActions({
  onCheckout,
  onViewFullCart,
  onClose,
  layout = "overlay",
}: CartActionsProps) {
  const handleCheckout = () => {
    onCheckout?.();
    onClose?.();
  };

  const handleViewFullCart = () => {
    onViewFullCart?.();
    onClose?.();
  };

  return (
    <div className="flex flex-col gap-2">
      {/* Primary CTA: Amber checkout */}
      <Link
        href={CHECKOUT_PAGE_PATH}
        onClick={handleCheckout}
        className="flex h-11 w-full items-center justify-center rounded-full bg-[#f4a13a] px-6 font-medium text-[#1a2e2d] transition-colors hover:bg-[#e8932e] md:w-auto"
        aria-label="Proceed to checkout"
      >
        Checkout
      </Link>

      {/* View Full Cart: overlay only */}
      {layout === "overlay" && onViewFullCart !== undefined && (
        <Link
          href={CART_PAGE_PATH}
          onClick={handleViewFullCart}
          className="flex h-10 w-full items-center justify-center rounded-lg border border-[var(--border)] px-6 text-sm font-medium text-[var(--foreground)] transition-colors hover:bg-[var(--default)] md:w-auto"
          aria-label="View full cart page"
        >
          View Full Cart
        </Link>
      )}

      {/* Continue Shopping: ghost-style link */}
      <Link
        href={SHOP_PATH}
        onClick={() => onClose?.()}
        className="flex h-10 w-full items-center justify-center rounded-lg px-6 text-sm font-medium text-[var(--muted)] transition-colors hover:text-[var(--foreground)] hover:bg-[var(--default)] md:w-auto"
        aria-label="Continue shopping"
      >
        Continue Shopping
      </Link>
    </div>
  );
}
