import Link from "next/link";
import { Activity, Dumbbell, LayoutDashboard, Settings } from "lucide-react";

const links = [
  { href: "/", label: "Panel", icon: LayoutDashboard },
  { href: "/running", label: "Bieganie", icon: Activity },
  { href: "/strength", label: "Siłownia", icon: Dumbbell },
  { href: "/settings", label: "Ustawienia", icon: Settings },
];

export function Nav() {
  return (
    <header className="border-b border-muted/40 bg-surface">
      <div className="mx-auto flex max-w-5xl items-center justify-between px-4 py-3 sm:px-6">
        <Link href="/" className="flex items-center gap-3 text-lg font-bold text-fg">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="/logo.svg"
            alt=""
            width={72}
            height={72}
            className="-mt-1 -mb-6 h-[72px] w-[72px] rounded-2xl shadow-lg ring-2 ring-surface"
          />
          <span className="hidden text-xs font-normal tracking-wide text-fg/50 sm:block">
            <span className="font-semibold text-accent">K</span>siążka{" "}
            <span className="font-semibold text-accent">N</span>otowań{" "}
            <span className="font-semibold text-accent">U</span>dźwigów i{" "}
            <span className="font-semibold text-accent">R</span>ezultatów
          </span>
        </Link>
        <nav className="flex items-center gap-1 sm:gap-2">
          {links.map(({ href, label, icon: Icon }) => (
            <Link
              key={href}
              href={href}
              className="flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-sm font-medium text-fg/80 transition-colors hover:bg-bg hover:text-accent sm:px-3"
            >
              <Icon size={16} />
              <span className="hidden sm:inline">{label}</span>
            </Link>
          ))}
        </nav>
      </div>
    </header>
  );
}