Pricing Table Two

1"use client";
2 
3import { Check, Minus, Zap } from "lucide-react";
4import { useState } from "react";
5import { cva, type VariantProps } from "class-variance-authority";
6import { motion, AnimatePresence } from "motion/react";
7 
8import { type Plan } from "@/lib/billingsdk-config";
9import { cn } from "@/lib/utils";
10import {
11  Table,
12  TableBody,
13  TableCell,
14  TableHead,
15  TableHeader,
16  TableRow,
17} from "@/components/ui/table";
18import { Button } from "@/components/ui/button";
19import { Switch } from "@/components/ui/switch";
20 
21const sectionVariants = cva("py-32", {
22  variants: {
23    size: {
24      small: "py-12",
25      medium: "py-20",
26      large: "py-32",
27    },
28    theme: {
29      minimal: "",
30      classic:
31        "bg-gradient-to-b from-background to-muted/20 relative overflow-hidden",
32    },
33  },
34  defaultVariants: {
35    size: "medium",
36    theme: "minimal",
37  },
38});
39 
40const titleVariants = cva("mb-2 font-semibold", {
41  variants: {
42    size: {
43      small: "text-2xl lg:text-3xl",
44      medium: "text-3xl lg:text-4xl",
45      large: "text-3xl lg:text-5xl",
46    },
47    theme: {
48      minimal: "",
49      classic:
50        "bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent font-bold",
51    },
52  },
53  defaultVariants: {
54    size: "large",
55    theme: "minimal",
56  },
57});
58 
59const descriptionVariants = cva("text-muted-foreground", {
60  variants: {
61    size: {
62      small: "text-sm lg:text-base",
63      medium: "text-base lg:text-lg",
64      large: "lg:text-lg",
65    },
66    theme: {
67      minimal: "",
68      classic: "text-center max-w-2xl mx-auto",
69    },
70  },
71  defaultVariants: {
72    size: "large",
73    theme: "minimal",
74  },
75});
76 
77const toggleWrapperVariants = cva("flex justify-center items-center gap-3", {
78  variants: {
79    size: {
80      small: "mt-6",
81      medium: "mt-7",
82      large: "mt-8",
83    },
84    theme: {
85      minimal: "",
86      classic: "mt-10",
87    },
88  },
89  defaultVariants: {
90    size: "large",
91    theme: "minimal",
92  },
93});
94 
95const toggleLabelVariants = cva("font-medium text-sm transition-all", {
96  variants: {
97    size: {
98      small: "text-xs",
99      medium: "text-sm",
100      large: "text-sm",
101    },
102    theme: {
103      minimal: "",
104      classic: "font-semibold",
105    },
106  },
107  defaultVariants: {
108    size: "large",
109    theme: "minimal",
110  },
111});
112 
113const switchScaleVariants = cva("transition-all", {
114  variants: {
115    size: {
116      small: "scale-90",
117      medium: "scale-95",
118      large: "",
119    },
120    theme: {
121      minimal: "",
122// … truncated