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

export function Badge({ color, text, ...props }) {
  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 css={[tw`px-2 py-1 inline text-primary text-xs font-semibold uppercase  rounded-full `, realColor]} {...props}>{text}</p>
  );
}