import Head from 'next/head'
import fsPromises from 'fs/promises'
import path from 'path'
import type { CustomLink, EntryList } from '../interfaces/LinkTypes'
import { PageContentBox, PageCard, PageDescription, PageTitle, CardContentGame } from '../components/styles/content'
import Link from 'next/link'

function Servers(props: EntryList) {
  const serverList = props.games
  return (
    <>
      <Head>
        <title>Neshweb - Games</title>
        <meta charSet='utf-8' />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <PageTitle>
        Server List
      </PageTitle>

      <PageDescription>
        Lists all available Services, probably up-to-date
      </PageDescription>

      <PageContentBox>
        {Object.values(serverList).map((item: CustomLink) => {
          if (item.href != null) {
            return (
              <PageCard key={item.name}>
                <Link href={item.href}>
                  <CardContentGame content={item} />
                </Link>
              </PageCard>
            )
          }
          else {
            return (
              <PageCard key={item.name}>
                <CardContentGame content={item} />
              </PageCard>
            )
          }
        }
        )}
      </PageContentBox>
    </>
  )
}

export async function getServerSideProps() {
  const filePath = path.join(process.cwd(), '/public/pages.json')
  const jsonData = await fsPromises.readFile(filePath)
  const list = JSON.parse(jsonData.toString())

  return { props: list }
}

export default Servers