import type { CSSProperties } from "react";
import { links } from "../lib/data";

type NavProps = { current: string };

// catatan: memakai <a> biasa (bukan next/link) agar setiap halaman dimuat penuh
// seperti situs multipage html, sehingga css tiap halaman tidak saling bocor

// nav versi 1: inline css (dipakai index)
const inlineNav: Record<string, CSSProperties> = {
  list: { display: "flex", flexWrap: "wrap", gap: "8px", listStyle: "none", margin: 0, padding: 0 },
  link: { display: "inline-block", padding: "8px 16px", borderRadius: "999px", textDecoration: "none", fontWeight: 600, color: "#0f4c5c", background: "#e3eef0" },
  active: { display: "inline-block", padding: "8px 16px", borderRadius: "999px", textDecoration: "none", fontWeight: 600, color: "#ffffff", background: "#0f4c5c" },
};

export function NavInline({ current }: NavProps) {
  return (
    <nav aria-label="Navigasi utama" style={{ padding: "16px 0" }}>
      <ul style={inlineNav.list}>
        {links.map((item) => (
          <li key={item.href}>
            <a
              href={item.href}
              style={current === item.href ? inlineNav.active : inlineNav.link}
              aria-current={current === item.href ? "page" : undefined}
            >
              {item.label}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
}

// nav versi 2: external css (about, hobbies, contact) - kelas ada di public/styles.css
export function NavExternal({ current }: NavProps) {
  return (
    <nav className="site-nav" aria-label="Navigasi utama">
      <ul>
        {links.map((item) => (
          <li key={item.href}>
            <a
              href={item.href}
              className={current === item.href ? "active" : undefined}
              aria-current={current === item.href ? "page" : undefined}
            >
              {item.label}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
}

// nav versi 3: tailwind css (gallery)
export function NavTailwind({ current }: NavProps) {
  return (
    <nav aria-label="Navigasi utama" className="py-4">
      <ul className="flex flex-wrap gap-2 list-none m-0 p-0">
        {links.map((item) => (
          <li key={item.href}>
            <a
              href={item.href}
              aria-current={current === item.href ? "page" : undefined}
              className={
                current === item.href
                  ? "inline-block rounded-full bg-teal-800 px-4 py-2 font-semibold text-white no-underline"
                  : "inline-block rounded-full bg-teal-50 px-4 py-2 font-semibold text-teal-800 no-underline hover:bg-teal-100"
              }
            >
              {item.label}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
}