import dynamic from "next/dynamic";
import { useRouter } from "next/router";
import { useState, useEffect } from "react";

import { serverSideTranslations } from "next-i18next/serverSideTranslations";

import { Alert, Container, Grid, MediaQuery } from "@mantine/core";

import { Icon, ICONS } from "vseth-canine-ui";

import InstallGuide from "../components/installguide";
const TOC = dynamic(() => import("../components/toc"), {
  ssr: false,
});

export default function Install() {
  const { locale } = useRouter();

  return (
    <>
      <Container size="xl">
        <Grid>
          <MediaQuery smallerThan="md" styles={{ display: "none" }}>
            <Grid.Col md={4}>
              <TOC />
            </Grid.Col>
          </MediaQuery>
          <Grid.Col md={8} sm={12} className="bash-guide">
            {locale === "de" && (
              <Alert icon={<Icon icon={ICONS.INFO} />} title="Bemerkung">
                Leider ist dieser Guide nur auf Englisch verfügbar.
              </Alert>
            )}
            <InstallGuide />
          </Grid.Col>
        </Grid>
      </Container>
    </>
  );
}

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ["common"])),
      protected: false,
    },
  };
}