Pricing Table Three

1"use client";
2 
3import { Button } from "@/components/ui/button";
4import { Card, CardContent, CardHeader } from "@/components/ui/card";
5import { Badge } from "@/components/ui/badge";
6import { Check } from "lucide-react";
7import { cn } from "@/lib/utils";
8import { type Plan } from "@/lib/billingsdk-config";
9import { useState } from "react";
10import { Label } from "@/components/ui/label";
11import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
12import { cva, type VariantProps } from "class-variance-authority";
13import { AnimatePresence, motion } from "motion/react";
14 
15const sectionVariants = cva("mt-10 max-w-7xl mx-auto", {
16  variants: {
17    variant: {
18      small: "mt-6",
19      medium: "mt-8",
20      large: "mt-10",
21    },
22  },
23  defaultVariants: {
24    variant: "small",
25  },
26});
27 
28const toggleContainerVariants = cva(
29  "bg-muted flex h-11 w-fit shrink-0 items-center rounded-md p-1 text-lg",
30  {
31    variants: {
32      variant: {
33        small: "h-9 text-base",
34        medium: "h-10 text-lg",
35        large: "h-11 text-lg",
36      },
37    },
38    defaultVariants: {
39      variant: "large",
40    },
41  },
42);
43 
44const labelPaddingVariants = cva("px-7", {
45  variants: {
46    variant: {
47      small: "px-5",
48      medium: "px-6",
49      large: "px-7",
50    },
51  },
52  defaultVariants: {
53    variant: "large",
54  },
55});
56 
57const cardTitleVariants = cva("text-xl", {
58  variants: {
59    variant: {
60      small: "text-lg",
61      medium: "text-xl",
62      large: "text-xl",
63    },
64  },
65  defaultVariants: {
66    variant: "large",
67  },
68});
69 
70const cardDescriptionVariants = cva("text-sm", {
71  variants: {
72    variant: {
73      small: "text-xs",
74      medium: "text-sm",
75      large: "text-sm",
76    },
77  },
78  defaultVariants: {
79    variant: "large",
80  },
81});
82 
83const priceTextVariants = cva("text-4xl font-medium", {
84  variants: {
85    variant: {
86      small: "text-3xl",
87      medium: "text-4xl",
88      large: "text-4xl",
89    },
90  },
91  defaultVariants: {
92    variant: "large",
93  },
94});
95 
96const featureIconVariants = cva("w-4 h-4", {
97  variants: {
98    variant: {
99      small: "w-3 h-3",
100      medium: "w-4 h-4",
101      large: "w-4 h-4",
102    },
103  },
104  defaultVariants: {
105    variant: "large",
106  },
107});
108 
109const footerWrapperVariants = cva(
110  "flex items-center justify-between bg-muted/50 p-6 border-t border-border",
111  {
112    variants: {
113      variant: {
114        small: "p-4",
115        medium: "p-5",
116        large: "p-6",
117      },
118    },
119    defaultVariants: {
120      variant: "large",
121    },
122  },
123);
124 
125// … truncated