{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-5",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "label",
    "switch",
    "utils"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/pricing-5.tsx",
      "content": "import { useState } from \"react\";\nimport { MdCheckCircle } from \"react-icons/md\";\nimport { Switch } from \"@/components/ui/switch\";\nimport { Label } from \"@/components/ui/label\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface PricingFeature {\n  name: string;\n}\n\nexport interface PricingPlan {\n  id: string;\n  name: string;\n  description: string;\n  monthlyPrice: number;\n  yearlyPrice: number;\n  currency: string;\n  features: PricingFeature[];\n  buttonText: string;\n  buttonVariant?:\n    | \"default\"\n    | \"destructive\"\n    | \"outline\"\n    | \"secondary\"\n    | \"ghost\"\n    | \"link\";\n  isPopular?: boolean;\n  badge?: string;\n}\n\nexport interface Pricing5Props {\n  heading: string;\n  subheading: string;\n  monthlyLabel?: string;\n  yearlyLabel?: string;\n  plans: PricingPlan[];\n}\n\nexport function Pricing5({\n  heading,\n  subheading,\n  monthlyLabel = \"Bill Monthly\",\n  yearlyLabel = \"Bill Yearly\",\n  plans,\n}: Pricing5Props) {\n  const [isYearly, setIsYearly] = useState(false);\n\n  return (\n    <section className=\"bg-background w-full py-8 md:py-16\">\n      <div className=\"container mx-auto px-4 md:px-6\">\n        <div className=\"flex flex-col items-center justify-center space-y-4 text-center\">\n          <h2 className=\"text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl\">\n            {heading}\n          </h2>\n          <p className=\"text-muted-foreground max-w-[700px] md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed\">\n            {subheading}\n          </p>\n        </div>\n\n        <div className=\"mt-10 flex items-center justify-center space-x-4\">\n          <Label\n            htmlFor=\"billing-toggle\"\n            className={cn(\n              \"cursor-pointer text-sm font-medium transition-colors\",\n              !isYearly ? \"text-foreground\" : \"text-muted-foreground\",\n            )}\n          >\n            {monthlyLabel}\n          </Label>\n          <Switch\n            id=\"billing-toggle\"\n            checked={isYearly}\n            onCheckedChange={setIsYearly}\n          />\n          <Label\n            htmlFor=\"billing-toggle\"\n            className={cn(\n              \"cursor-pointer text-sm font-medium transition-colors\",\n              isYearly ? \"text-foreground\" : \"text-muted-foreground\",\n            )}\n          >\n            {yearlyLabel}\n          </Label>\n        </div>\n\n        <div className=\"mx-auto mt-16 grid max-w-6xl grid-cols-1 gap-8 md:grid-cols-3\">\n          {plans.map((plan) => (\n            <div\n              key={plan.id}\n              className={cn(\n                \"relative flex flex-col rounded-[2rem] p-2 transition-all duration-200 sm:p-3\",\n                plan.isPopular\n                  ? \"bg-primary shadow-[0_0_0_0.5px_rgba(0,0,0,0.08),0_2px_4px_0_rgba(0,0,0,0.15),inset_0_2px_0_0px_rgba(255,255,255,0.5)]\"\n                  : \"bg-muted shadow-[0_0_0_0.5px_rgba(0,0,0,0.08),0_2px_4px_0_rgba(0,0,0,0.08),inset_0_2px_0_0px_rgba(255,255,255,0.15)]\",\n              )}\n            >\n              <div className=\"mt-3 mb-4 px-4 sm:px-5\">\n                <div className=\"flex items-center justify-between\">\n                  <h3\n                    className={cn(\n                      \"text-xl font-bold\",\n                      plan.isPopular\n                        ? \"text-primary-foreground\"\n                        : \"text-foreground\",\n                    )}\n                  >\n                    {plan.name}\n                  </h3>\n                  {plan.badge && (\n                    <Badge\n                      variant={plan.isPopular ? \"secondary\" : \"default\"}\n                      className=\"rounded-full\"\n                    >\n                      {plan.badge}\n                    </Badge>\n                  )}\n                </div>\n                <p\n                  className={cn(\n                    \"mt-2 text-sm\",\n                    plan.isPopular\n                      ? \"text-primary-foreground/80\"\n                      : \"text-muted-foreground\",\n                  )}\n                >\n                  {plan.description}\n                </p>\n              </div>\n\n              <div className=\"bg-card flex flex-1 flex-col rounded-4xl p-6 shadow-[0_0_0_0.5px_rgba(0,0,0,0.08),0_2px_4px_0_rgba(0,0,0,0.08)] sm:p-8\">\n                <div className=\"flex items-baseline gap-1\">\n                  <span className=\"text-card-foreground text-4xl font-extrabold\">\n                    {plan.currency}\n                    {isYearly ? plan.yearlyPrice : plan.monthlyPrice}\n                  </span>\n                  <span className=\"text-muted-foreground text-sm font-medium\">\n                    / {isYearly ? \"year\" : \"month\"}\n                  </span>\n                </div>\n\n                <ul className=\"mt-8 flex-1 space-y-4\">\n                  {plan.features.map((feature, idx) => (\n                    <li key={idx} className=\"flex items-start gap-3\">\n                      <MdCheckCircle\n                        className={cn(\n                          \"size-6 shrink-0\",\n                          plan.isPopular\n                            ? \"text-primary\"\n                            : \"text-muted-foreground\",\n                        )}\n                      />\n                      <span className=\"text-card-foreground text-sm\">\n                        {feature.name}\n                      </span>\n                    </li>\n                  ))}\n                </ul>\n\n                <Button\n                  className={cn(\n                    \"] mt-8 h-12 w-full rounded-xl border text-base font-semibold\",\n                    plan.isPopular\n                      ? \"border-primary shadow-[0px_0px_4px_1px_rgba(0,0,0,0.05),inset_0_0px_4px_1px_rgba(255,255,255,0.45),inset_0_1px_0px_0px_rgba(255,255,255,0.35)]\"\n                      : \"border-border shadow-[0px_0px_4px_1px_rgba(0,0,0,0.05),inset_0_0px_4px_1px_rgba(255,255,255,0.15),inset_0_1px_0px_0px_rgba(255,255,255,0.1)]\",\n                  )}\n                  variant={\n                    plan.buttonVariant ||\n                    (plan.isPopular ? \"default\" : \"secondary\")\n                  }\n                >\n                  {plan.buttonText}\n                </Button>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/pricing-5.tsx"
    }
  ],
  "type": "registry:ui"
}