"use client";

import { AlertBanner } from "@/components/molecules/AlertBanner/AlertBanner";
import { Button } from "@/components/atoms/button";

interface CheckoutErrorFallbackProps {
  /** The shop href to navigate back to */
  shopHref: string;
}

/**
 * Error fallback displayed when checkout data is not available.
 * Shows an error banner with a link back to services.
 */
export function CheckoutErrorFallback({ shopHref }: CheckoutErrorFallbackProps) {
  return (
    <div className="max-w-2xl mx-auto py-8">
      <AlertBanner variant="error" title="Checkout Error" elevated>
        <div className="flex items-center justify-between">
          <span>Checkout data is not available</span>
          <Button as="a" href={shopHref} variant="link">
            Back to Services
          </Button>
        </div>
      </AlertBanner>
    </div>
  );
}
