proof-of-work/proof-of-work/app/main/navigation.tsx

'use client';

import { usePathname, useRouter } from 'next/navigation';
import {
  LayoutDashboard,
  Dumbbell,
  ListChecks,
  Settings,
  LogOut,
} from 'lucide-react';
import { logoutAction } from './actions';

interface NavigationProps {
  userName: string;
}

const navLinks = [
  { href: '/main/dashboard', label: 'Dashboard', icon: LayoutDashboard },
  { href: '/main/workouts', label: 'Workouts', icon: Dumbbell },
  { href: '/main/exercises', label: 'Exercises', icon: ListChecks },
  { href: '/main/settings', label: 'Settings', icon: Settings },
];

export default function Navigation({ userName }: NavigationProps) {
  const pathname = usePathname();
  const router = useRouter();

  const isActive = (href: string) => {
    return pathname === href || pathname.startsWith(href + '/');
  };

  const handleLogout = async () => {
    await logoutAction();
    router.push('/auth/login');
  };

  return (
    <>
      {/* Desktop Sidebar */}
      <aside className="hidden md:flex fixed left-0 top-0 h-screen w-[var(--sidebar-width)] border-r border-zinc-800 bg-[#0A0A0A] flex-col">
        <div className="p-6 border-b border-zinc-800">
          <h2 className="text-3xl font-display text-white tracking-wider">Proof of Work</h2>
        </div>

        <nav className="flex-1 overflow-y-auto p-4 space-y-2">
          {navLinks.map((link) => {
            const Icon = link.icon;
            const active = isActive(link.href);

            return (
              <a
                key={link.href}
                href={link.href}
                className={`flex items-center gap-3 px-4 py-2.5 rounded transition-all duration-200 ${
                  active
                    ? 'bg-white text-black font-semibold'
                    : 'text-zinc-500 hover:text-white hover:bg-zinc-900'
                }`}
              >
                <Icon className="w-5 h-5 flex-shrink-0" />
                <span className="text-sm">{link.label}</span>
              </a>
            );
          })}
        </nav>

        <div className="border-t border-zinc-800 p-4 space-y-4">
          <div className="px-4 py-2">
            <p className="text-xs text-zinc-600 uppercase tracking-widest">User</p>
            <p className="font-semibold text-white truncate mt-1">{userName}</p>
          </div>

          <button
            onClick={handleLogout}
            className="flex items-center gap-3 px-4 py-2.5 rounded transition-all duration-200 w-full justify-start text-red-500 hover:text-red-400 hover:bg-red-950/30"
          >
            <LogOut className="w-5 h-5 flex-shrink-0" />
            <span className="text-sm">Logout</span>
          </button>
        </div>
      </aside>

      {/* Mobile Bottom Nav */}
      <header className="flex md:hidden fixed bottom-0 left-0 right-0 border-t border-zinc-800 bg-[#0A0A0A]">
        <nav className="flex items-center justify-around h-[var(--bottom-nav-height)] w-full">
          {navLinks.map((link) => {
            const Icon = link.icon;
            const active = isActive(link.href);

            return (
              <a
                key={link.href}
                href={link.href}
                className={`flex flex-col items-center justify-center flex-1 h-full gap-1 transition-colors duration-200 ${
                  active
                    ? 'text-white bg-zinc-900'
                    : 'text-zinc-500 hover:text-white'
                }`}
              >
                <Icon className="w-6 h-6" />
                <span className="text-xs">{link.label}</span>
              </a>
            );
          })}

          <button
            onClick={handleLogout}
            className="flex flex-col items-center justify-center flex-1 h-full gap-1 text-red-500 hover:text-red-400 transition-colors duration-200"
          >
            <LogOut className="w-6 h-6" />
            <span className="text-xs">Logout</span>
          </button>
        </nav>
      </header>
    </>
  );
}