"use client";

import { useTranslations } from "next-intl";
import Link from "next/link";

export function Header() {
  const t = useTranslations("header")

  const header = [
    {"name": t("whoami"), "id": "whoami"},
    {"name": t("skills"), "id": "skills"},
    {"name": t("projects"), "id": "projects"},
  ]

  return (
    <header className="flex flex-col xl:flex-row gap-8 items-center justify-center xl:justify-between fixed top-0 left-0 right-0 py-4 xl:py-10 px-4 xl:px-8 z-50 backdrop-blur-lg bg-transparent">
      <h1>{t("name")}</h1>
      <div className="hidden xl:flex flex-row gap-10">
        {header.map((link, index) => (
          <Link href={`/#${link.id}`} key={index} className="hover:underline hover:decoration-3 hover:underline-offset-8">
            <h1>{link.name}</h1>
          </Link>
        ))}
      </div>
      <Link href="/#contact" className="hidden xl:block hover:underline hover:decoration-3 hover:underline-offset-8">
        <h1>{t("contact")}</h1>
      </Link>
    </header>
  );
}