import type { NextPage } from 'next';
import Head from 'next/head';
import Layout from '@themes/infra/components/Layout';
import Link from '@themes/signpost/components/Link';
import Table from '@themes/infra/components/Table';
import links from '../content/links.json';
import dedicatedServers from '../content/dedicated-servers.json';
import virtualServers from '../content/virtual-servers.json';
import loadbalancers from '../content/loadbalancers.json';
import kubernetes from '../content/kubernetes.json';

const Home: NextPage = () => {
  return (
    <>
      <Head>
        <title>infra.mareshq.com</title>
        <meta
          name="description"
          content="Vojtech Mares (MaresHQ) Infrastructure overview"
        />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <Layout>
        <h3 className="text-gray-600">infra.mareshq.com</h3>

        <main>
          <h1 className="font-sans font-bold text-4xl">
            MaresHQ Infrastructure
          </h1>
          <div className="grid lg:grid-cols-12 grid-cols-1 gap-4">
            <div className="col-span-3">
              <div className="mt-4">
                <h2 className="text-3xl font-bold">links</h2>
                <ul className="px-2 py-1">
                  {links.map((l) => (
                    <li key={l.name} className="my-2">
                      <Link title={l.name} url={l.url} />
                    </li>
                  ))}
                </ul>
              </div>
            </div>
            <div className="col-span-9 overflow-x-hidden">
              <div className="mt-4">
                <h2 className="text-3xl font-bold">
                  virtual servers
                </h2>
                <Table
                  columnNames={[
                    'name',
                    'provider',
                    'zone',
                    'ip',
                    'belongs to',
                  ]}
                >
                  <tbody>
                    {virtualServers.map((vs) => (
                      <tr key={vs.name}>
                        <td className="py-1 px-2">{vs.name}</td>
                        <td className="py-1 px-2">{vs.provider}</td>
                        <td className="py-1 px-2">{vs.zone}</td>
                        <td className="py-1 px-2">
                          <code>{vs.ip}</code>
                        </td>
                        <td className="py-1 px-2">{vs.belongsTo}</td>
                      </tr>
                    ))}
                  </tbody>
                </Table>
              </div>
              <div className="mt-4">
                <h2 className="text-3xl font-bold">
                  dedicated servers
                </h2>
                <Table
                  columnNames={[
                    'name',
                    'provider',
                    'zone',
                    'ip',
                    'belongs to',
                  ]}
                >
                  <tbody>
                    {dedicatedServers.map((ds) => (
                      <tr key={ds.name}>
                        <td className="py-1 px-2">{ds.name}</td>
                        <td className="py-1 px-2">{ds.provider}</td>
                        <td className="py-1 px-2">{ds.zone}</td>
                        <td className="py-1 px-2">
                          <code>{ds.ip}</code>
                        </td>
                        <td className="py-1 px-2">{ds.belongsTo}</td>
                      </tr>
                    ))}
                  </tbody>
                </Table>
              </div>
              <div className="mt-4">
                <h2 className="text-3xl font-bold">load balancers</h2>
                <Table
                  columnNames={[
                    'name',
                    'provider',
                    'zone',
                    'ip',
                    'belongs to',
                  ]}
                >
                  <tbody>
                    {loadbalancers.map((lb) => (
                      <tr key={lb.name}>
                        <td className="py-1 px-2">{lb.name}</td>
                        <td className="py-1 px-2">{lb.provider}</td>
                        <td className="py-1 px-2">{lb.zone}</td>
                        <td className="py-1 px-2">
                          <code>{lb.ip}</code>
                        </td>
                        <td className="py-1 px-2">{lb.belongsTo}</td>
                      </tr>
                    ))}
                  </tbody>
                </Table>
              </div>
              <div className="mt-4">
                <h2 className="text-3xl font-bold">
                  kubernetes clusters
                </h2>
                <Table
                  columnNames={['name', 'provider', 'zone', 'url']}
                >
                  <tbody>
                    {kubernetes.map((k8s) => (
                      <tr key={k8s.name}>
                        <td className="py-1 px-2">{k8s.name}</td>
                        <td className="py-1 px-2">{k8s.provider}</td>
                        <td className="py-1 px-2">{k8s.zone}</td>
                        <td className="py-1 px-2">
                          <code>{k8s.url}</code>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </Table>
              </div>
            </div>
          </div>
        </main>
      </Layout>
    </>
  );
};

export default Home;
