"use client"; import { Coins } from "lucide-react"; import { cn } from "@/lib/utils"; type Tone = | "neutral" | "primary" | "foreground" | "sky" | "emerald" | "violet" | "amber" | "rose"; interface Card19Props { credits?: string; price?: string; bonus?: string; perCredit?: string; creditsLabel?: string; action?: string; tone?: Tone; className?: string; } const iconClasses: Record = { neutral: "bg-foreground text-background", primary: "bg-primary text-primary-foreground", foreground: "bg-foreground text-background", sky: "bg-sky-500 text-white", emerald: "bg-emerald-500 text-white", violet: "bg-violet-500 text-white", amber: "bg-amber-500 text-white", rose: "bg-rose-500 text-white", }; const buttonClasses: Record = { neutral: "bg-foreground text-background", primary: "bg-primary text-primary-foreground", foreground: "bg-foreground text-background", sky: "bg-sky-500 text-white", emerald: "bg-emerald-500 text-white", violet: "bg-violet-500 text-white", amber: "bg-amber-500 text-white", rose: "bg-rose-500 text-white", }; export const card19Demo: Card19Props = { credits: "1,000", price: "$8.00", bonus: "+150 bonus credits", perCredit: "$0.008 per credit", creditsLabel: "credits", action: "Top up", tone: "neutral", }; export function Card19({ credits, price, bonus, perCredit, creditsLabel = "credits", action = "Top up", tone = "neutral", className, }: Card19Props) { return (

{credits} {creditsLabel}

{bonus && ( {bonus} )}

{price} {perCredit && ( {perCredit} )}

); }