---
import Section from "../Section.astro";

enum NavigationItemType {
  Link = 0,
  Text = 1,
}

type NavigationItem =
  | {
      path: string;
      label: string;
      type: NavigationItemType.Link;
    }
  | {
      type: NavigationItemType.Text;
      content: string;
    };

type NavigationGroup = {
  title: string;
  class?: string;
  items: Array<NavigationItem>;
};

const tree: Array<NavigationGroup> = [
  {
    title: "Übersicht",
    items: [
      {
        path: "/",
        type: NavigationItemType.Link,
        label: "Startseite",
      },
    ],
  },
  {
    title: "Rechtliches",
    items: [
      {
        path: "/legal/imprint",
        label: "Impressum",
        type: NavigationItemType.Link,
      },
      {
        path: "/legal/privacy",
        label: "Datenschutzerklärung",
        type: NavigationItemType.Link,
      },
    ],
  },
  {
    title: "Zugehöriges",
    items: [
      {
        path: "https://enrico.buehler.earth",
        label: "Enrico Bühler",
        type: NavigationItemType.Link,
      },
    ],
  },
  {
    title: "",
    class: "ml-auto mr-0 self-end",
    items: [
      {
        type: NavigationItemType.Text,
        content: "Made with ❤️ in Rottweil",
      },
    ],
  },
];
---

<footer class="bg-neutral-accent">
  <Section>
    <div class="flex flex-row flex-wrap gap-12 w-full pb-8">
      {
        tree.map((group) => (
          <div class={group.class}>
            {group.title && <h3 class="mb-2">{group.title}</h3>}
            <div class="flex flex-col">
              {group.items.map((item) => {
                switch (item.type) {
                  case NavigationItemType.Link:
                    return <a href={item.path}>{item.label}</a>;
                  case NavigationItemType.Text:
                    return <p>{item.content}</p>;
                }
              })}
            </div>
          </div>
        ))
      }
    </div>
  </Section>
</footer>