"use client";

import { type ReactNode } from "react";

interface BadgeProps {
  children: ReactNode;
  variant?:
    | "default"
    | "success"
    | "warning"
    | "danger"
    | "info"
    | "orange"
    | "purple"
    | "outline";
  size?: "sm" | "md";
  className?: string;
}

export default function Badge({
  children,
  variant = "default",
  size = "md",
  className = "",
}: BadgeProps) {
  const base =
    "inline-flex items-center gap-1.5 rounded-full font-semibold whitespace-nowrap";

  const sizes: Record<string, string> = {
    sm: "px-2 py-0.5 text-[10px]",
    md: "px-2.5 py-1 text-xs",
  };

  const variants: Record<string, string> = {
    default:
      "bg-[var(--card-bg)] text-[var(--text-secondary)] border border-[var(--border)]",
    success:
      "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20",
    warning:
      "bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-500/20",
    danger:
      "bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/20",
    info: "bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/20",
    orange:
      "bg-orange-500/10 text-orange-600 dark:text-orange-400 border border-orange-500/20",
    purple:
      "bg-fuchsia-500/10 text-fuchsia-600 dark:text-fuchsia-400 border border-fuchsia-500/20",
    outline:
      "bg-transparent text-[var(--text-secondary)] border border-[var(--border)]",
  };

  return (
    <span className={`${base} ${sizes[size]} ${variants[variant]} ${className}`}>
      {children}
    </span>
  );
}