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