import { useRouter } from "next/router";
import Image from "next/image";

import { ActionIcon, Grid, MediaQuery, Space } from "@mantine/core";

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

import parse from "html-react-parser";

import { getAccentColor } from "../utilities/colors";

import content from "../content/texts.json";
import tux from "../public/images/tux.png";

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

  return (
    <div
      style={{
        height: "calc(100vh - 112px)",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-evenly",
      }}
    >
      <Grid style={{ display: "flex", alignItems: "center" }}>
        <Grid.Col xs={12} md={6}>
          <div>
            <Image
              src="/images/logo.svg"
              width={0}
              height={0}
              sizes="100vw"
              style={{ width: "30rem", maxWidth: "100%", height: "auto" }}
              alt="TheAlternative Logo  "
            />
            <Space h="xl" />
            <Space h="xl" />
            {content.topSection.map((entry, i) => (
              <div key={i}>
                <p>{parse(entry[locale || "en"])}</p>
                <Space h="xs" />
              </div>
            ))}
          </div>
        </Grid.Col>
        <MediaQuery smallerThan="md" styles={{ display: "none" }}>
          <Grid.Col md={6}>
            <Image
              src={tux}
              width={0}
              height={0}
              sizes="100vw"
              style={{ width: "100%", height: "auto" }}
              alt="Tux, the Linux Mascot"
            />
          </Grid.Col>
        </MediaQuery>
      </Grid>
      <a href="#events">
        <ActionIcon
          style={{ marginLeft: "auto", marginRight: "auto" }}
          size="3rem"
        >
          <Icon icon={ICONS.DOWN} color={getAccentColor()} size="2rem" />
        </ActionIcon>
      </a>
    </div>
  );
}