const ROLE_STYLES: Record<string, string> = {
  SUPER_ADMIN: "bg-red-500/10 text-red-400 border-red-500/20",
  ADMIN: "bg-orange-500/10 text-orange-400 border-orange-500/20",
  MANAGER: "bg-sky-500/10 text-sky-400 border-sky-500/20",
  USER: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20",
};

interface BadgeProps {
  children: React.ReactNode;
  variant?: "default" | "success" | "danger" | "role";
  role?: string;
}

export default function Badge({ children, variant = "default", role }: BadgeProps) {
  const styles = {
    default: "bg-[var(--bg-hover)] text-[var(--text-muted)] border-[var(--border)]",
    success: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20",
    danger: "bg-red-500/10 text-red-400 border-red-500/20",
    role: role ? (ROLE_STYLES[role] ?? "bg-[var(--accent-muted)] text-[var(--accent)] border-[var(--accent)]/20") : "bg-[var(--accent-muted)] text-[var(--accent)] border-[var(--accent)]/20",
  };

  return (
    <span className={`inline-flex items-center px-2.5 py-0.5 text-xs font-medium rounded-md border ${styles[variant]}`}>
      {children}
    </span>
  );
}