"use client";

import { useEffect, useState } from "react";

import Hyperlink from "@/components/ui/NavLink";
import { getServices } from "@/lib/api/helpers/services";
import { Service } from "@/lib/api/types";

const defaultServices: Service[] = [
  {
    id: null,
    title: "Git Repos",
    description: null,
    priority: 1,
    link: "dagemark.se/git",
  },
  {
    id: null,
    title: "Nextcloud Drive",
    description: null,
    priority: 3,
    link: "dagemark.se/drive",
  },
  {
    id: null,
    title: "Game Servers",
    description: null,
    priority: 4,
    link: "gserver.dagemark.se",
  },
  {
    id: null,
    title: "Immich Album",
    description: null,
    priority: 5,
    link: "album.dagemark.se",
  },
  {
    id: null,
    title: "Jellyfin Streaming",
    description: null,
    priority: 2,
    link: "streaming.dagemark.se",
  },
];

export default function Header() {
  const [services, setServices] = useState<Service[]>(defaultServices);
  useEffect(() => {
    getServices()
      .then((services) => {
        if (services.length > 0) {
          setServices(services);
        }
      })
      .catch(() => {
        // Keep default services if the backend is not reached :C
      });
  }, []);
  return (
    <header className="w-full h-full bg-slate-500 dark:bg-slate-900 flex items-center justify-between">
      <nav className="flex items-center justify-around w-full h-full px-6 py-4">
        {services.map((service) => (
          <Hyperlink
            key={service.priority}
            name={service.title}
            link={service.link}
          />
        ))}
      </nav>
    </header>
  );
}