import React from "react";
import useTranslator from "~/hooks/useTranslator";
import { translations as globalTranslations } from "~/localization/translation-packs/global";
import Logo from "./logo.png";
import { RootProps } from "./types";
import * as S from "./styles";

export const Root: React.FC<RootProps> = () => {
  const { translations } = useTranslator([globalTranslations]);

  return (
    <S.Attribution
      href="https://locallogic.co/"
      target="_blank"
      rel="noreferrer"
    >
      <S.Text
        variant="caption1"
        weight="--ll-font-weight-semibold"
        noMargin
        lineClamp={1}
        color="--ll-color-on-background-variant1"
      >
        {translations.POWERED_BY}
      </S.Text>
      <S.AttributionImg src={Logo} />
    </S.Attribution>
  );
};

export default Root;