"use client";

import { motion } from "framer-motion";
import { Coins, Loader2 } from "lucide-react";
import { cn } from "@/lib/utils";
import { press, stagger } from "@/lib/motion";

export interface CreditPackCardProps {
  credits: number;
  price: string;
  pricePerCredit: string;
  bestValue?: boolean;
  onCheckout: () => void;
  loading?: boolean;
}

export function CreditPackCard({
  credits,
  price,
  pricePerCredit,
  bestValue = false,
  onCheckout,
  loading = false,
}: CreditPackCardProps) {
  return (
    <motion.div
      variants={stagger.item}
      className={cn(
        "border p-4 flex flex-col items-center text-center relative",
        bestValue
          ? "border-brand/40 bg-brand/[0.02] ring-1 ring-brand/10"
          : "border-border/50 bg-white"
      )}
    >
      {bestValue && (
        <div className="absolute -top-2.5 left-1/2 -translate-x-1/2">
          <span className="inline-flex items-center px-2.5 py-0.5 rounded-full bg-brand/10 text-brand text-[10px] font-medium">
            Best value
          </span>
        </div>
      )}

      <div className="flex items-center gap-1.5 mb-2 mt-1">
        <Coins className="w-4 h-4 text-brand" />
        <span className="text-[20px] font-medium text-foreground">{credits}</span>
      </div>

      <p className="text-[11px] text-muted-foreground mb-3">credits</p>

      <p className="text-[18px] font-medium text-foreground mb-0.5">{price}</p>
      <p className="text-[11px] text-muted-foreground mb-4">
        {pricePerCredit}/credit
      </p>

      <motion.button
        onClick={onCheckout}
        disabled={loading}
        className={cn(
          "w-full h-9 font-medium text-[13px]",
          "transition-colors duration-150 flex items-center justify-center gap-2",
          "disabled:opacity-50 disabled:cursor-not-allowed",
          "bg-secondary text-foreground hover:bg-accent"
        )}
        {...press}
      >
        {loading ? (
          <Loader2 className="w-3.5 h-3.5 animate-spin" />
        ) : (
          "Buy"
        )}
      </motion.button>
    </motion.div>
  );
}

Prop	Type	Default	Description

credits*	`number`	—	Number of credits
price*	`string`	—	Price display text
pricePerCredit*	`string`	—	Per-credit price
bestValue	`boolean`	`false`	Show best value badge
onCheckout*	`() => void`	—	Checkout callback
loading	`boolean`	`false`	Show loading state

CreditPackCard

API Reference

Source Code