import { cn } from "~/lib/utils";
import type { JSX } from "solid-js";

type BadgeVariant = "default" | "success" | "warning" | "error" | "info";

interface BadgeProps {
  variant?: BadgeVariant;
  children: JSX.Element;
  class?: string;
}

const variantClasses: Record<BadgeVariant, string> = {
  default: "bg-[var(--color-bg-secondary)] text-[var(--color-text-secondary)]",
  success: "bg-[var(--color-success-bg)] text-[var(--color-success)]",
  warning: "bg-[var(--color-warning-bg)] text-[var(--color-warning)]",
  error: "bg-[var(--color-error-bg)] text-[var(--color-error)]",
  info: "bg-[var(--color-info-bg)] text-[var(--color-info)]",
};

export default function Badge(props: BadgeProps) {
  return (
    <span
      class={cn(
        "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium",
        variantClasses[props.variant ?? "default"],
        props.class,
      )}
    >
      {props.children}
    </span>
  );
}
