import type { NextPage } from 'next';
import Head from 'next/head';
import sections from '../content/sections.json';

const Home: NextPage = () => {
  return (
    <>
      <Head>
        <title>ant.k8s.vxm.cz</title>
        <meta
          name="description"
          content="Signpost for Octopus Kubernetes Cluster (ant.k8s.vxm.cz)"
        />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <h3 className="px-16 py-4 text-gray-600">ant.k8s.vxm.cz</h3>
      <main className="px-16">
        <h1 className="font-sans font-bold text-4xl">
          Ant Kubernetes Cluster Signpost
        </h1>
        <div className="grid grid-cols-3 gap-4">
          {sections.map((section) => (
            <section key={section.name} className="mt-2 mx-2">
              <h2 className="font-sans font-semibold text-2xl mb-4">
                {section.name}
              </h2>
              <ul>
                {section.items.map((item) => (
                  <li key={item.name} className="my-2">
                    <a
                      href={item.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="
                      block
                      w-full
                      text-center
                      mx-2
                      py-2
                      border-2
                      border-gray-400
                      rounded
                      hover:bg-gray-900
                      hover:border-gray-900
                      hover:text-white
                      transition
                      focus:ring-2
                      focus:ring-gray-600 text-gray-800
                    "
                    >
                      {item.name}
                    </a>
                  </li>
                ))}
              </ul>
            </section>
          ))}
        </div>
      </main>
    </>
  );
};

export default Home;
