import dynamic from "next/dynamic";

const OfficeMap = dynamic(() => import("../components/map"), {
  ssr: false,
});

import { useRouter } from "next/router";

import { useTranslation } from "next-i18next";

import parse from "html-react-parser";

import { Alert, Button, Card, Grid, Paper, Space, Text } from "@mantine/core";

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

import ContactForm from "../components/contactForm";
import BoardMemberCard from "../components/boardMemberCard";

import board from "../content/board.json";
import about from "../content/about.json";

export default function About() {
  const { t } = useTranslation("common");
  const { locale } = useRouter();

  return (
    <>
      <h1>{t("about")}</h1>

      <Grid style={{ justifyContent: "center" }}>
        {board.map((entry, i) => (
          <Grid.Col
            key={i}
            md={3}
            sm={4}
            xs={6}
            style={{ display: "flex", flexDirection: "column" }}
          >
            <BoardMemberCard entry={entry} />
          </Grid.Col>
        ))}
      </Grid>

      <Space h="xl" />
      <Space h="xl" />
      <section id="address">
        <Grid>
          <Grid.Col md={4} sm={6} xs={12}>
            <Paper shadow="md">
              <Alert title={t("aboutUs")} variant="outline">
                <Text>{about.description[locale || "en"]}</Text>
              </Alert>
            </Paper>

            <Space h="md" />
            <b>TheAlternative</b>
            {about.address.map((line, i) => (
              <p key={i} style={{ marginBottom: 0 }}>
                {line}
              </p>
            ))}

            <Space h="xs" />
            {/* stolen from here: https://stackoverflow.com/questions/33577448/is-there-a-way-to-do-array-join-in-react */}
            {about.links
              .map((link, i) => (
                <a target="_blank" href={link.url} key={i}>
                  {link.text}
                </a>
              ))
              .reduce(
                (acc, x) =>
                  acc === null ? (
                    x
                  ) : (
                    <>
                      {acc} | {x}
                    </>
                  ),
                null
              )}
          </Grid.Col>
          <Grid.Col md={4} sm={6} xs={12}>
            <OfficeMap />
          </Grid.Col>
          <Grid.Col md={4} sm={6} xs={12}>
            <ContactForm />
          </Grid.Col>
        </Grid>
      </section>
    </>
  );
}