import type { Icon, IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { capitalize } from "../utils/utils";

type BadgeProps = {
  icon?: Icon | IconDefinition;
  text: string;
};

const Badge = ({ icon, text }: BadgeProps) => {
  const lowerCaseWord = text.toLowerCase();
  return (
    <span
      className={`text-sm font-medium inline-flex items-center px-2 py-0.5 rounded-md me-2 
        border-2 space-x-2
         ${text.toLowerCase() === "running" ? "bg-green-800 text-green-300 border-green-900" : "bg-red-800 text-red-300 border-red-900"} `}
    >
      {icon && <FontAwesomeIcon icon={icon} />}
      <span>{capitalize(lowerCaseWord)}</span>
    </span>
  );
};

export default Badge;