import React from "react";
import { useTranslation } from "next-i18next";
import * as Dialog from "@radix-ui/react-dialog";

import CrossIcon from "~public/icons/Cross.svg";
import "./index.scss";

const AboutModal = () => {
  const { t } = useTranslation("common");

  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        <li className="MenuItem">
          <span>{t("modals.about.title")}</span>
        </li>
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Content
          className="About Dialog"
          onOpenAutoFocus={(event) => event.preventDefault()}
        >
          <div className="DialogHeader">
            <Dialog.Title className="DialogTitle">
              {t("menu.about")}
            </Dialog.Title>
            <Dialog.Close className="DialogClose" asChild>
              <span>
                <CrossIcon />
              </span>
            </Dialog.Close>
          </div>

          <section>
            <Dialog.Description className="DialogDescription">
              Granblue.team is a tool to save and share team compositions for{" "}
              <a href="https://game.granbluefantasy.jp">Granblue Fantasy.</a>
            </Dialog.Description>
            <Dialog.Description className="DialogDescription">
              Start adding things to a team and a URL will be created for you to
              share it wherever you like, no account needed.
            </Dialog.Description>
            <Dialog.Description className="DialogDescription">
              You can make an account to save any teams you find for future
              reference, or to keep all of your teams together in one place.
            </Dialog.Description>
          </section>

          <section>
            <Dialog.Title className="DialogTitle">Credits</Dialog.Title>
            <Dialog.Description className="DialogDescription">
              Granblue.team was built by{" "}
              <a href="https://twitter.com/jedmund">@jedmund</a> with a lot of
              help from{" "}
              <a href="https://twitter.com/lalalalinna">@lalalalinna</a> and{" "}
              <a href="https://twitter.com/tarngerine">@tarngerine</a>.
            </Dialog.Description>
          </section>

          <section>
            <Dialog.Title className="DialogTitle">Open Source</Dialog.Title>
            <Dialog.Description className="DialogDescription">
              This app is open source. You can contribute on Github.
            </Dialog.Description>
          </section>
        </Dialog.Content>
        <Dialog.Overlay className="Overlay" />
      </Dialog.Portal>
    </Dialog.Root>
  );
};

export default AboutModal;
