{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "payment-card",
  "title": "Payment Card",
  "description": "A payment card component",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "button",
    "card",
    "utils"
  ],
  "files": [
    {
      "path": "src/registry/billingsdk/payment-card.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Button } from \"@/components/ui/button\";\nimport { ArrowRight, Check } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\n\nexport interface finalTextProps {\n  text: string;\n}\n\nexport interface PaymentCardProps {\n  title: string;\n  description: string;\n  price: string;\n  feature?: string;\n  featuredescription?: string;\n  feature2?: string;\n  feature2description?: string;\n  finalText?: finalTextProps[];\n  onPay?: (data: {\n    cardNumber: string;\n    expiry: string;\n    cvc: string;\n  }) => Promise<void> | void;\n  className?: string;\n}\n\nexport function PaymentCard({\n  title,\n  description,\n  price,\n  feature,\n  featuredescription,\n  feature2,\n  feature2description,\n  finalText = [],\n  onPay,\n  className,\n}: PaymentCardProps) {\n  const [cardNumber, setCardNumber] = useState(\"\");\n  const [expiry, setExpiry] = useState(\"\");\n  const [cvc, setCvc] = useState(\"\");\n  const [index, setIndex] = useState(0);\n  const [errors, setErrors] = useState<{\n    card?: string;\n    expiry?: string;\n    cvc?: string;\n  }>({});\n\n  const validate = () => {\n    const newErrors: typeof errors = {};\n\n    // Card number validation\n    if (!/^[0-9 ]{16,19}$/.test(cardNumber)) {\n      newErrors.card = \"Card number must be 16 digits and only numbers.\";\n    }\n\n    // Expiry validation\n    if (!/^(0[1-9]|1[0-2])\\/\\d{2}$/.test(expiry)) {\n      newErrors.expiry = \"Enter a valid expiry date (MM/YY).\";\n    } else {\n      const [month, year] = expiry.split(\"/\").map(Number);\n      const now = new Date();\n      const firstInvalidDay = new Date(2000 + year, month, 1);\n      if (firstInvalidDay <= now) {\n        newErrors.expiry = \"Card has expired.\";\n      }\n    }\n\n    // CVC validation\n    if (!/^[0-9]{3,4}$/.test(cvc)) {\n      newErrors.cvc = \"CVC must be 3 or 4 digits.\";\n    }\n\n    setErrors(newErrors);\n    return Object.keys(newErrors).length === 0;\n  };\n\n  const handlePay = () => {\n    if (validate()) {\n      if (onPay) {\n        onPay({ cardNumber, expiry, cvc });\n        console.log(\"Payment processed!\");\n      } else {\n        console.log(\"error\");\n      }\n    }\n  };\n\n  // Final text animation\n  useEffect(() => {\n    if (!finalText || finalText.length === 0) return;\n\n    const interval = setInterval(() => {\n      setIndex((prev) => (prev + 1) % finalText.length);\n    }, 2000);\n\n    return () => clearInterval(interval);\n  }, [finalText]);\n\n  return (\n    <div className={cn(\"mx-auto w-full max-w-4xl\", className)}>\n      <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n        {/* Order Summary */}\n        <div className=\"order-2 md:order-1\">\n          <div className=\"space-y-4 md:sticky md:top-6\">\n            {/* Price Summary */}\n            <Card>\n              <CardHeader>\n                <CardTitle>Order Summary</CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div className=\"space-y-2\">\n                  <div className=\"flex items-center justify-between text-sm\">\n                    <span className=\"text-muted-foreground\">Subtotal</span>\n                    <span className=\"tabular-nums\">${price || \"320\"}.00</span>\n                  </div>\n                  <div className=\"flex items-center justify-between border-t pt-2\">\n                    <span className=\"font-medium\">Total</span>\n                    <span className=\"text-xl font-semibold tabular-nums\">\n                      ${price || \"320\"}.00\n                    </span>\n                  </div>\n                </div>\n              </CardContent>\n            </Card>\n\n            {/* Features */}\n            <Card>\n              <CardHeader>\n                <CardTitle>What's Included</CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div className=\"space-y-3\">\n                  <div className=\"flex gap-3\">\n                    <Check className=\"text-primary mt-0.5 h-4 w-4 shrink-0\" />\n                    <div className=\"space-y-1\">\n                      <p className=\"text-sm leading-none font-medium\">\n                        {feature || \"Payment & Invoice\"}\n                      </p>\n                      <p className=\"text-muted-foreground text-sm\">\n                        {featuredescription ||\n                          \"Automated billing and detailed transaction records\"}\n                      </p>\n                    </div>\n                  </div>\n\n                  <div className=\"flex gap-3\">\n                    <Check className=\"text-primary mt-0.5 h-4 w-4 shrink-0\" />\n                    <div className=\"space-y-1\">\n                      <p className=\"text-sm leading-none font-medium\">\n                        {feature2 || \"Priority Support\"}\n                      </p>\n                      <p className=\"text-muted-foreground text-sm\">\n                        {feature2description ||\n                          \"Faster response times and technical support\"}\n                      </p>\n                    </div>\n                  </div>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n\n        {/* Payment Form */}\n        <Card className=\"order-1 md:order-2\">\n          <CardHeader>\n            <CardTitle>{title || \"Complete your payment\"}</CardTitle>\n            <CardDescription>\n              {description ||\n                \"Enter your card details to finalize your subscription\"}\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-4\">\n            {/* Card Number */}\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"cardNumber\">Card number</Label>\n              <div className=\"relative\">\n                <div className=\"absolute top-1/2 left-3 z-10 flex h-6 w-8 -translate-y-1/2 items-center justify-center overflow-hidden\">\n                  <AnimatePresence mode=\"wait\">\n                    <motion.img\n                      key={index}\n                      src={\n                        [\n                          \"https://img.icons8.com/color/48/visa.png\",\n                          \"https://img.icons8.com/color/48/mastercard-logo.png\",\n                          \"https://img.icons8.com/color/48/amex.png\",\n                          \"https://img.icons8.com/color/48/rupay.png\",\n                        ][index % 4]\n                      }\n                      alt=\"card\"\n                      className=\"h-6 w-6\"\n                      initial={{ opacity: 0, y: 10 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      exit={{ opacity: 0, y: -10 }}\n                      transition={{ duration: 0.5 }}\n                    />\n                  </AnimatePresence>\n                </div>\n                <Input\n                  id=\"cardNumber\"\n                  value={cardNumber}\n                  onChange={(e) => setCardNumber(e.target.value)}\n                  className=\"pl-14 font-mono tracking-wider\"\n                  placeholder=\"1234 5678 9012 3456\"\n                  maxLength={19}\n                />\n              </div>\n              {errors.card && (\n                <p className=\"text-destructive text-sm\">{errors.card}</p>\n              )}\n            </div>\n\n            {/* Expiry and CVC */}\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"expiry\">Expiry date</Label>\n                <Input\n                  id=\"expiry\"\n                  value={expiry}\n                  onChange={(e) => setExpiry(e.target.value)}\n                  className=\"font-mono\"\n                  placeholder=\"MM/YY\"\n                  maxLength={5}\n                />\n                {errors.expiry && (\n                  <p className=\"text-destructive text-sm\">{errors.expiry}</p>\n                )}\n              </div>\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"cvc\">CVC</Label>\n                <Input\n                  id=\"cvc\"\n                  type=\"password\"\n                  value={cvc}\n                  onChange={(e) => setCvc(e.target.value)}\n                  className=\"font-mono\"\n                  placeholder=\"123\"\n                  maxLength={4}\n                />\n                {errors.cvc && (\n                  <p className=\"text-destructive text-sm\">{errors.cvc}</p>\n                )}\n              </div>\n            </div>\n\n            {/* Discount Code */}\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"discount\">Discount code (optional)</Label>\n              <div className=\"flex gap-2\">\n                <Input\n                  id=\"discount\"\n                  placeholder=\"Enter code\"\n                  maxLength={12}\n                  className=\"flex-1\"\n                />\n                <Button variant=\"secondary\" type=\"button\">\n                  Apply\n                </Button>\n              </div>\n            </div>\n\n            {/* Pay Button */}\n            <Button className=\"mt-2 w-full\" onClick={handlePay}>\n              Pay ${price || \"320\"}.00\n              <ArrowRight className=\"ml-2 h-4 w-4\" />\n            </Button>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/billingsdk/payment-card.tsx"
    },
    {
      "path": "src/registry/billingsdk/demo/payment-card-demo.tsx",
      "content": "\"use client\";\nimport { PaymentCard } from \"@/components/billingsdk/payment-card\";\n\nexport function PaymentCardDemo() {\n  return (\n    <PaymentCard\n      title=\"Final step, make the payment.\"\n      description=\"To finalize your subscription, kindly complete your payment using a valid credit card.\"\n      price=\"100\"\n      finalText={[\n        { text: \"Automated billing & invoices\" },\n        { text: \"Priority support\" },\n        { text: \"Exclusive member benefits\" },\n      ]}\n      feature=\"Payment & Invoice\"\n      featuredescription=\"Automated billing and invoicing with detailed transaction records. Professional receipts delivered instantly to your email.\"\n      feature2=\"Priority Support\"\n      feature2description=\"Get dedicated customer support with faster response times and direct access to our technical team for any issues.\"\n      onPay={async ({ cardNumber, expiry, cvc }) => {\n        console.log(\n          `Payment Processed! ${cardNumber}, exp ${expiry}, cvc ${cvc}`,\n        );\n      }}\n    />\n  );\n}\n\nexport default PaymentCardDemo;\n",
      "type": "registry:component",
      "target": "components/payment-card-demo.tsx"
    }
  ],
  "type": "registry:block"
}