import Link from 'next/link';

const links = [
  { href: '/', label: 'Галерея' },
  { href: '/auctions', label: 'Аукционы' },
  { href: '/club', label: 'Клуб' },
];

export default function Nav() {
  return (
    <header className="sticky top-0 z-40 border-b border-line/70 bg-paper/80 backdrop-blur-md dark:border-white/10 dark:bg-ink/70">
      <nav className="mx-auto flex h-16 max-w-content items-center justify-between px-6 md:px-10">
        <Link
          href="/"
          className="font-serif text-2xl font-medium tracking-tightest text-ink dark:text-paper"
        >
          Ника
        </Link>

        <ul className="flex items-center gap-8 text-sm text-muted">
          {links.map((l) => (
            <li key={l.href}>
              <Link
                href={l.href}
                className="transition-colors hover:text-ink dark:hover:text-paper"
              >
                {l.label}
              </Link>
            </li>
          ))}
          <li>
            <Link
              href="/login"
              className="transition-colors hover:text-ink dark:hover:text-paper"
            >
              Войти
            </Link>
          </li>
          <li>
            <Link
              href="/subscribe"
              className="rounded-full border border-ink/20 px-4 py-1.5 text-ink transition-colors hover:border-ink hover:bg-ink hover:text-paper dark:border-white/25 dark:text-paper dark:hover:bg-paper dark:hover:text-ink"
            >
              Подписаться
            </Link>
          </li>
        </ul>
      </nav>
    </header>
  );
}