import React from "react";
import useHelpers from "../../useHelpers";
import { useRootElement } from "../context";
import * as S from "./styles";
import { BadgeProps } from "./types";

export const Badge: React.FC<BadgeProps> = ({
  options: { variant = "large", isPrimary = true } = {},
}: BadgeProps) => {
  const {
    options: { scoresData, score },
  } = useRootElement();
  const { scoreVal } = useHelpers({ scoresData, score });

  if (scoreVal == null) {
    return null;
  }

  return (
    <S.ScoreBadge
      data-testid="score-badge"
      $variant={variant}
      $isPrimary={isPrimary}
    >
      <S.Value>{scoreVal}</S.Value>
    </S.ScoreBadge>
  );
};