"use client" import * as React from "react" import { Check } from "lucide-react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" const pricingCardVariants = cva( "relative w-full min-w-56 max-w-[300px] transform overflow-hidden rounded-lg border shadow-lg transition duration-300", { variants: { variant: { default: "border-gray-700 bg-gradient-to-br from-slate-700 to-slate-800", outline: "border-gray-700 bg-gradient-to-br from-slate-700 to-slate-800", ghost: "border-transparent bg-transparent", }, size: { default: "p-6 lg:p-8", sm: "p-4 lg:p-6", lg: "p-8 lg:p-10", }, hover: { default: "hover:scale-[none] md:hover:scale-105", none: "hover:scale-100", } }, defaultVariants: { variant: "default", size: "default", hover: "default" } } ) export interface PricingCardProps extends React.HTMLAttributes, VariantProps { heading: string description: string price: number buttonText: string list: string[] discount?: number listHeading?: string onButtonClick?: () => void } const PricingCard = React.forwardRef( ({ className, variant, size, hover, heading, description, price, discount, list, listHeading, buttonText, onButtonClick, ...props }, ref) => { const withDiscount = React.useMemo(() => { return Math.round(price - (price * (discount ?? 100)) / 100) }, [price, discount]) return (

{heading}

{description}

${discount ? withDiscount : price} {discount && ( ${price} )}

{discount && (

{discount}%

)}

{listHeading}

{text}

) } ) PricingCard.displayName = "PricingCard" export { PricingCard, pricingCardVariants }