"use client";

import * as React from "react";
import { Check, Coins } from "lucide-react";
import { cn } from "@/lib/utils";

export interface CreditPack {
  credits: number;
  price: number;
  bonus?: number;
}

const DEFAULT_PACKS: CreditPack[] = [
  { credits: 500, price: 5 },
  { credits: 1500, price: 12, bonus: 10 },
  { credits: 5000, price: 35, bonus: 25 },
  { credits: 15000, price: 90, bonus: 40 },
];

export function CreditPacks({
  packs = DEFAULT_PACKS,
  currency = "$",
  className,
}: {
  packs?: CreditPack[];
  currency?: string;
  className?: string;
}) {
  const [selected, setSelected] = React.useState(1);

  const best = packs.reduce(
    (bestIndex, pack, index, all) =>
      pack.price / pack.credits < all[bestIndex].price / all[bestIndex].credits ? index : bestIndex,
    0
  );

  return (
    <div className={cn("w-full space-y-3", className)}>
      {packs.map((pack, index) => {
        const perThousand = (pack.price / pack.credits) * 1000;
        const active = selected === index;

        return (
          <button
            key={pack.credits}
            onClick={() => setSelected(index)}
            className={cn(
              "flex w-full items-center gap-4 rounded-xl border p-4 text-start transition-all",
              active ? "border-primary bg-accent/50 ring-[3px] ring-ring/20" : "hover:border-foreground/25"
            )}
          >
            <span
              className={cn(
                "flex size-10 shrink-0 items-center justify-center rounded-lg",
                active ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
              )}
            >
              {active ? <Check className="size-4" /> : <Coins className="size-4" />}
            </span>

            <span className="min-w-0 flex-1">
              <span className="flex items-center gap-2">
                <span className="font-medium tabular-nums">
                  {pack.credits.toLocaleString()} credits
                </span>
                {pack.bonus && (
                  <span className="rounded-full bg-emerald-500/10 px-1.5 py-0.5 text-[10px] font-medium text-emerald-600 dark:text-emerald-400">
                    +{pack.bonus}% bonus
                  </span>
                )}
                {index === best && (
                  <span className="rounded-full bg-primary px-1.5 py-0.5 text-[10px] font-medium text-primary-foreground">
                    Best value
                  </span>
                )}
              </span>
              <span className="mt-0.5 block text-xs text-muted-foreground tabular-nums">
                {currency}
                {perThousand.toFixed(2)} per 1,000
              </span>
            </span>

            <span className="shrink-0 text-lg font-semibold tabular-nums">
              {currency}
              {pack.price}
            </span>
          </button>
        );
      })}

      <button className="h-10 w-full rounded-lg bg-primary text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90">
        Buy {packs[selected].credits.toLocaleString()} credits
      </button>
    </div>
  );
}
Related components
