"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
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 },
];

function isActive(pathname: string, href: string) {
  return href === "/" ? pathname === "/" : pathname.startsWith(href);
}

export function NavLinks() {
  const pathname = usePathname();

  return (
    <>
      {links.map(({ href, label, icon: Icon }) => {
        const active = isActive(pathname, href);
        return (
          <Link
            key={href}
            href={href}
            aria-current={active ? "page" : undefined}
            className={`flex items-center gap-1.5 rounded-full px-2.5 py-1.5 text-sm font-medium transition-colors sm:px-3.5 ${
              active
                ? "bg-accent/15 text-accent"
                : "text-fg/70 hover:bg-white/5 hover:text-fg"
            }`}
          >
            <Icon size={16} />
            <span className="hidden sm:inline">{label}</span>
          </Link>
        );
      })}
    </>
  );
}