"use client";

import type { ReactNode } from "react";

type BadgeColor = "gray" | "red" | "green" | "blue" | "yellow" | "purple" | "pink";

interface BadgeProps {
  children: ReactNode;
  color?: BadgeColor;
  className?: string;
}

const colorStyles: Record<BadgeColor, string> = {
  gray: "bg-zinc-700 text-zinc-300",
  red: "bg-red-600/20 text-red-400",
  green: "bg-green-600/20 text-green-400",
  blue: "bg-blue-600/20 text-blue-400",
  yellow: "bg-yellow-600/20 text-yellow-400",
  purple: "bg-purple-600/20 text-purple-400",
  pink: "bg-pink-600/20 text-pink-400",
};

export default function Badge({ children, color = "gray", className }: BadgeProps) {
  return (
    <span
      className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${colorStyles[color]} ${className || ""}`}
    >
      {children}
    </span>
  );
}