import Head from 'next/head'
import { Game } from '../interfaces/CardTypes';
import { PageContentBox, PageDescription, PageTitle, CardContentGame } from '../components/styles/content'
import GameList from '../public/pages.json';

function Servers() {
  // TODO: unuggly this shit
  const serverList: Game[] = JSON.parse(JSON.stringify(GameList.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: Game) => (
          <CardContentGame key={item.name} content={item} />
        ))}
      </PageContentBox>
    </>
  )
}

export default Servers