Badge

"use client";

import React, { ReactNode } from "react";

interface BadgeProps {
  children: ReactNode;
  variant?: "primary" | "success" | "warning" | "error" | "outline";
  className?: string;
  style?: React.CSSProperties;
}

/**
 * A versatile badge component for status indicators and labels.
 */
const BASE_BADGE_STYLE: React.CSSProperties = {
  display: "inline-flex",
  alignItems: "center",
  padding: "0.25rem 0.75rem",
  borderRadius: "9999px",
  fontSize: "0.75rem",
  fontWeight: 600,
  whiteSpace: "nowrap",
};

const BADGE_STYLES: Record<
  NonNullable<BadgeProps["variant"]>,
  React.CSSProperties
> = {
  success: {
    ...BASE_BADGE_STYLE,
    background: "rgba(58, 125, 68, 0.1)",
    color: "var(--accent)",
    border: "1px solid var(--accent)",
  },
  warning: {
    ...BASE_BADGE_STYLE,
    background: "rgba(234, 179, 8, 0.1)",
    color: "#ca8a04",
    border: "1px solid #eab308",
  },
  error: {
    ...BASE_BADGE_STYLE,
    background: "rgba(239, 68, 68, 0.1)",
    color: "#dc2626",
    border: "1px solid #ef4444",
  },
  outline: {
    ...BASE_BADGE_STYLE,
    background: "transparent",
    color: "var(--text-primary)",
    border: "1px solid var(--border-color)",
  },
  primary: {
    ...BASE_BADGE_STYLE,
    background: "rgba(166, 138, 109, 0.1)",
    color: "var(--brand-warm)",
    border: "1px solid var(--brand-warm)",
  },
};

export const Badge = ({
  children,
  variant = "primary",
  className = "",
  style,
}: BadgeProps) => {
  const variantStyle = BADGE_STYLES[variant] || BADGE_STYLES.primary;

  // Avoid object creation on every render by using precomputed styles unless a custom style is passed
  const finalStyle = style ? { ...variantStyle, ...style } : variantStyle;

  return (
    <span className={`bare-badge ${className}`} style={finalStyle}>
      {children}
    </span>
  );
};

import { Badge } from '@/components/ui/badge';

export default function MyComponent() {
  return (
    <div style={{ display: 'flex', gap: '0.5rem' }}>
      <Badge variant="success">Active</Badge>
      <Badge variant="warning">Pending</Badge>
      <Badge variant="outline">Draft</Badge>
    </div>
  );
}