import Head from 'next/head'
import Link from 'next/link'
import styles from '../styles/Home.module.css'
import { useRouter } from 'next/router'
import { useTranslations } from 'next-intl'
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
import Image from 'next/image'

export function getStaticProps({locale}: GetStaticPropsContext) {
  return {
    props: {
      // You can get the messages from anywhere you like, but the recommended
      // pattern is to put them in JSON files separated by language and read 
      // the desired one based on the `locale` received from Next.js. 
      messages: require(`../locales/${locale}.json`),
    }
  };
}

export default function Home() {
  const router = useRouter()
  const t = useTranslations('common')
  return (
    <div className={styles.container}>
      <Head>
        <title>Vänner Bäst | Friends Best</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
        <meta property="og:title" content="Vänner Bäst | Friends Best" />
        <meta property="og:type" content="website" />
        <meta property="og:image" content="https://www.vannerba.st/yr.jpg" />
        <meta name="twitter:card" content="summary" />
        <meta name="twitter:site" content="@Ludoviko_" />
        <meta name="twitter:creator" content="@Ludoviko_" />
        <meta property="og:description" content="A Young Royals fan website with links to different discussion spaces."/>
      </Head>

      <main className={styles.main}>
        <Image src="/yr.jpg" alt="Young Royals" width={256} height={144} />
        <h1 className={styles.title}>
          {t('welcome')}
        </h1>
        <p className={styles.description}>
          {t('desc')}
        </p>
        <div className={styles.grid}>
          <a href="https://vannerba.st/watch" className={styles.card}>
            <h2>{t('watch.title')} &rarr;</h2>
            <p>{t('watch.desc')} </p>
          </a>
          <a href="https://vannerba.st/discord" className={styles.card}>
            <h2>Discord &rarr;</h2>
            <p>{t('discord')}</p>
          </a>
          <a href="https://vannerba.st/reddit" className={styles.card}>
            <h2>Reddit &rarr;</h2>
            <p>{t('reddit')}</p>
          </a>
          <a href="https://vannerba.st/learn" className={styles.card}>
            <h2>{t('learn.title')} &rarr;</h2>
            <p>{t('learn.desc')}</p>
          </a>
        </div>
      </main>
      <footer className={styles.footer}><Link href="https://ludoviko.ch">Created by: Ludoviko</Link></footer>
    </div>
  )
}
