import { useTranslation } from "react-i18next";
import tw from "twin.macro";
import "styled-components/macro";
import { ComponentProps, forwardRef } from "react";

export const Badge = forwardRef<HTMLParagraphElement, { color: string, text: string | number }>(({ color, text, ...props }, ref) => {
  const colors = {
    yellow: tw`bg-yellow-500`,
    gray: tw`bg-gray-500`,
    red: tw`bg-red-700`,
  };

  const realColor = (typeof (color) === "string" && color in colors) ? colors[color] : color;

  return (
    <p ref={ref} css={[tw`px-2 py-1 inline text-primary text-xs font-semibold uppercase  rounded-full `, realColor]} {...props}>{text}</p>
  );
});