import React from "react";
import { Text } from "@local-logic/core/ui";
import useTranslator from "~/hooks/useTranslator";
import { translations as scoreTranslations } from "~/localization/translation-packs/scores";
import { translations as scoreDescriptionTranslations } from "~/localization/translation-packs/scoreDescriptions";
import { useRootElement } from "../context";
import { TitleProps } from "./types";

export const Title: React.FC<TitleProps> = (props) => {
  const {
    options: { score },
  } = useRootElement();
  const { translations } = useTranslator([
    scoreDescriptionTranslations,
    scoreTranslations,
  ]);

  return props.options?.isRawText ? (
    <>{translations[score]}</>
  ) : (
    <Text {...props.options}>{translations[score]}</Text>
  );
};

Title.defaultProps = {
  options: {
    noMargin: true,
    variant: "h6",
    color: "--ll-color-on-background-variant1",
    isRawText: false,
  },
};