import React from "react";
import { Text } from "@local-logic/core/ui";
import useTranslator from "~/hooks/useTranslator";
import { translations as poiTranslations } from "~/localization/translation-packs/pois";
import { translations as schoolTranslations } from "~/localization/translation-packs/schools";
import { useRootElement } from "../context";
import { TitleProps } from "./types";

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

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

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