{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "payment-failure",
  "title": "Payment Failure",
  "description": "A payment failure card component with retry, home, and support actions.",
  "dependencies": ["lucide-react"],
  "registryDependencies": ["button", "card", "utils"],
  "files": [
    {
      "path": "src/registry/billingsdk/payment-failure.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { XCircle, RefreshCw, Home, Mail } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface PaymentFailureProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Optional heading at the top.\n   * @default \"Payment Failed\"\n   */\n  title?: string;\n\n  /**\n   * Short description under the title.\n   * @default \"We couldn't process your payment.\"\n   */\n  subtitle?: string;\n\n  /**\n   * Extra explanatory message under the reasons list.\n   * @default \"Please check your payment details and try again, or contact your bank for more information.\"\n   */\n  message?: string;\n\n  /**\n   * Bullet points explaining common failure reasons.\n   */\n  reasons?: string[];\n\n  /**\n   * Whether the primary action is in loading / retrying state.\n   */\n  isRetrying?: boolean;\n\n  /**\n   * Label for the primary CTA button.\n   * @default \"Try Again\"\n   */\n  retryButtonText?: string;\n\n  /**\n   * Label for the secondary button (e.g. Home).\n   * @default \"Home\"\n   */\n  secondaryButtonText?: string;\n\n  /**\n   * Label for the tertiary button (e.g. Support).\n   * @default \"Support\"\n   */\n  tertiaryButtonText?: string;\n\n  /**\n   * Called when user clicks the primary CTA (Try Again).\n   */\n  onRetry?: () => void;\n\n  /**\n   * Called when user clicks the secondary button (Home).\n   */\n  onSecondary?: () => void;\n\n  /**\n   * Called when user clicks the tertiary button (Support).\n   */\n  onTertiary?: () => void;\n}\n\nexport const PaymentFailure = React.forwardRef<\n  HTMLDivElement,\n  PaymentFailureProps\n>(\n  (\n    {\n      className,\n      title = \"Payment Failed\",\n      subtitle = \"We couldn't process your payment.\",\n      message = \"Please check your payment details and try again, or contact your bank for more information.\",\n      reasons = [\n        \"Insufficient funds in your account\",\n        \"Incorrect card details or expired card\",\n        \"Card declined by your bank\",\n        \"Network connection issues\",\n      ],\n      isRetrying = false,\n      retryButtonText = \"Try Again\",\n      secondaryButtonText = \"Home\",\n      tertiaryButtonText = \"Support\",\n      onRetry,\n      onSecondary,\n      onTertiary,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Card ref={ref} className={cn(\"w-full max-w-md\", className)} {...props}>\n        <CardHeader className=\"space-y-4 text-center\">\n          <div className=\"flex justify-center\">\n            <div className=\"bg-destructive/10 rounded-full p-3\">\n              <XCircle className=\"text-destructive h-16 w-16\" />\n            </div>\n          </div>\n          <div>\n            <CardTitle className=\"text-2xl font-bold\">{title}</CardTitle>\n            <CardDescription className=\"mt-2 text-base\">\n              {subtitle}\n            </CardDescription>\n          </div>\n        </CardHeader>\n\n        <CardContent className=\"space-y-4\">\n          {reasons.length > 0 && (\n            <div className=\"bg-muted space-y-2 rounded-lg p-4\">\n              <h3 className=\"text-sm font-semibold\">\n                Common reasons for payment failure:\n              </h3>\n              <ul className=\"text-muted-foreground list-inside list-disc space-y-1 text-sm\">\n                {reasons.map((reason) => (\n                  <li key={reason}>{reason}</li>\n                ))}\n              </ul>\n            </div>\n          )}\n\n          {message && (\n            <p className=\"text-muted-foreground text-center text-sm\">\n              {message}\n            </p>\n          )}\n        </CardContent>\n\n        <CardFooter className=\"flex flex-col space-y-2\">\n          <Button\n            onClick={onRetry}\n            className=\"w-full\"\n            disabled={isRetrying || !onRetry}\n          >\n            {isRetrying ? (\n              <>\n                <RefreshCw className=\"mr-2 h-4 w-4 animate-spin\" />\n                Retrying...\n              </>\n            ) : (\n              <>\n                <RefreshCw className=\"mr-2 h-4 w-4\" />\n                {retryButtonText}\n              </>\n            )}\n          </Button>\n\n          {(onSecondary || onTertiary) && (\n            <div className=\"flex w-full gap-2\">\n              {onSecondary && (\n                <Button\n                  onClick={onSecondary}\n                  variant=\"outline\"\n                  className=\"flex-1\"\n                >\n                  <Home className=\"mr-2 h-4 w-4\" />\n                  {secondaryButtonText}\n                </Button>\n              )}\n\n              {onTertiary && (\n                <Button\n                  onClick={onTertiary}\n                  variant=\"outline\"\n                  className=\"flex-1\"\n                >\n                  <Mail className=\"mr-2 h-4 w-4\" />\n                  {tertiaryButtonText}\n                </Button>\n              )}\n            </div>\n          )}\n        </CardFooter>\n      </Card>\n    );\n  },\n);\n\nPaymentFailure.displayName = \"PaymentFailure\";\n",
      "type": "registry:component",
      "target": "components/billingsdk/payment-failure.tsx"
    },
    {
      "path": "src/registry/billingsdk/demo/payment-failure-demo.tsx",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\nimport { useRouter } from \"next/navigation\";\nimport { PaymentFailure } from \"@/registry/billingsdk/payment-failure\";\n\nexport function PaymentFailureDemo() {\n  const [isRetrying, setIsRetrying] = useState(false);\n  const router = useRouter();\n\n  const handleRetry = async () => {\n    setIsRetrying(true);\n\n    try {\n      // TODO: your actual retry logic (redirect to payment, call API, etc.)\n      await new Promise((resolve) => setTimeout(resolve, 1500));\n      // e.g. router.push(\"/checkout\");\n    } finally {\n      setIsRetrying(false);\n    }\n  };\n\n  return (\n    <div className=\"bg-background flex min-h-screen items-center justify-center p-4\">\n      <PaymentFailure\n        isRetrying={isRetrying}\n        onRetry={handleRetry}\n        onSecondary={() => router.push(\"/\")}\n        onTertiary={() => router.push(\"/support\")}\n        reasons={[\n          \"Insufficient funds in your account\",\n          \"Incorrect card details or expired card\",\n          \"Card declined by your bank\",\n          \"Network connection issues\",\n        ]}\n        // Optional overrides:\n        // title=\"Payment declined\"\n        // subtitle=\"Your bank declined the transaction.\"\n        // retryButtonText=\"Retry Payment\"\n        // secondaryButtonText=\"Go Home\"\n        // tertiaryButtonText=\"Contact Support\"\n      />\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/payment-failure-demo.tsx"
    }
  ],
  "type": "registry:block"
}