"use client";

import { Button } from "@heroui/react";
import Link from "next/link";

/**
 * Checkout error state: error message + retry button + back-to-cart link.
 * Phase 3 will refine styling; this provides a functional error boundary UI.
 */
export function CheckoutErrorState({
  message,
  onRetry,
}: {
  message: string;
  onRetry: () => void;
}) {
  return (
    <div className="flex flex-col items-center gap-4 py-12 text-center">
      <p className="text-lg font-medium text-danger">{message}</p>
      <div className="flex flex-col gap-2 w-full md:w-auto md:flex-row">
        <Button variant="primary" onPress={onRetry} className="w-full md:w-auto">
          Try again
        </Button>
        <Link
          href="/cart"
          className="inline-flex items-center justify-center rounded-medium gap-2 px-4 py-2 w-full md:w-auto bg-default-100 hover:bg-default-200 text-foreground font-medium transition-colors"
        >
          Back to cart
        </Link>
      </div>
    </div>
  );
}
