'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useAuthStore } from '@/lib/store';

const LINKS = [
  { href: '/dashboard', label: 'Главная' },
  { href: '/history', label: 'История' },
  { href: '/qr', label: 'QR-код' },
  { href: '/partners', label: 'Партнёры' },
] as const;

export function StudentNav() {
  const pathname = usePathname();
  const { logout } = useAuthStore();

  return (
    <nav className="border-b border-gray-700 bg-gray-900">
      <div className="mx-auto flex max-w-lg flex-wrap items-center gap-1 px-4 py-3">
        <span className="mr-4 text-sm font-semibold text-white">CU Points</span>
        {LINKS.map((link) => (
          <Link
            key={link.href}
            href={link.href}
            className={`rounded-lg px-3 py-1.5 text-sm transition-colors ${
              pathname === link.href
                ? 'bg-blue-600 text-white'
                : 'text-gray-400 hover:bg-gray-700 hover:text-white'
            }`}
          >
            {link.label}
          </Link>
        ))}
        <button
          onClick={logout}
          className="ml-auto rounded-lg px-3 py-1.5 text-sm text-gray-400 transition-colors hover:bg-gray-700 hover:text-white"
        >
          Выйти
        </button>
      </div>
    </nav>
  );
}