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