Badge

"use client";

import { Badge, CountBadge, StatusBadge } from "@waveinno/ui";
import { Sparkles } from "lucide-react";

const TONES = ["neutral", "info", "success", "warning", "danger", "accent"] as const;

const LABEL: Record<(typeof TONES)[number], string> = {
  neutral: "Draft",
  info: "Scheduled",
  success: "Paid",
  warning: "Due soon",
  danger: "Overdue",
  accent: "New",
};

export default function BadgeExample() {
  return (
    <div className="space-y-3">
      {(["soft", "solid", "outline", "dot"] as const).map((variant) => (
        <div key={variant} className="flex flex-wrap items-center gap-2">
          <span className="w-16 text-[11.5px] text-muted">{variant}</span>
          {TONES.map((t) => (
            <StatusBadge key={t} label={LABEL[t]} tone={t} variant={variant} />
          ))}
        </div>
      ))}
      <div className="flex flex-wrap items-center gap-2">
        <span className="w-16 text-[11.5px] text-muted">special</span>
        <Badge variant="gradient" dot={false}>
          <Sparkles className="size-3" /> Pro
        </Badge>
        <Badge variant="gradient">New</Badge>
        <Badge variant="live" tone="success">
          Gate online
        </Badge>
        <Badge variant="live" tone="danger">
          Live
        </Badge>
        <CountBadge value={7} />
        <CountBadge value={12} tone="danger" />
      </div>
    </div>
  );
}