//@/components/Badge/Badge.tsx

import React from 'react';

type BadgeVariant = "primary" | "secondary" | "success" | "warning" | "error";

interface BadgeProps {
  text: string;
  variant?: BadgeVariant;
  pill?: boolean;
}

const badgeStyles = {
  base: "inline-flex items-center px-2.5 py-0.5 rounded text-xs font-medium",
  variants: {
    primary: "bg-blue-100 text-blue-800",
    secondary: "bg-gray-100 text-gray-800",
    success: "bg-green-100 text-green-800",
    warning: "bg-yellow-100 text-yellow-800",
    error: "bg-red-100 text-red-800",
  },
  pill: "rounded-full px-3 py-1",
};

const Badge: React.FC<BadgeProps> = ({ text, variant = "primary", pill = false }) => {
  const badgeClassName = `
    ${badgeStyles.base}
    ${badgeStyles.variants[variant]}
    ${pill ? badgeStyles.pill : ""}
  `;

  return <span className={badgeClassName}>{text}</span>;
};

export { Badge };