Badge

import type { HTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  tone?: "sage" | "clay" | "sand" | "forest" | "sun" | "berry";
  size?: "sm" | "md";
  icon?: ReactNode;
}

const TONE = {
  sage: "bg-da-accent text-da-accent-fg",
  clay: "bg-da-secondary text-da-secondary-fg",
  sand: "bg-da-surface-2 text-da-fg",
  forest: "bg-da-primary text-da-primary-fg",
  sun: "bg-da-warning/25 text-da-fg",
  berry: "bg-da-danger/12 text-da-danger",
} as const;

/** Soft rounded pill label in natural tints (sage, clay, sand, forest, sun, berry), two sizes, optional leading icon. */
export function Badge({ tone = "sage", size = "md", icon, className, children, ...rest }: BadgeProps) {
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1.5 rounded-da-pill font-medium whitespace-nowrap [&_svg]:size-3.5",
        size === "sm" ? "px-2 py-0.5 text-xs" : "px-3 py-1 text-sm",
        TONE[tone],
        className,
      )}
      {...rest}
    >
      {icon}
      {children}
    </span>
  );
}

export default Badge;