'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { ClipboardList, FolderClock } from 'lucide-react';
import { useScopedI18n } from '@/locales/client';

export function Navbar() {
  const pathname = usePathname();
  const t = useScopedI18n('component.navBar');

  return (
    <header className="border-b">
      <div className="safe-x container mx-auto flex h-14 max-w-6xl items-center justify-between">
        <Link href="/" className="flex items-center gap-2 text-lg font-medium">
          <span className="flex h-8 w-8 items-center justify-center rounded border">
            <ClipboardList className="h-4 w-4" />
          </span>
          <span className="hidden md:block">{t('title')}</span>
        </Link>

        <nav className="flex items-center gap-4 text-sm">
          <Link
            href="/"
            className={`${pathname === '/' ? 'font-medium' : 'text-muted-foreground'} transition-colors hover:text-foreground`}
          >
            {t('introduce')}
          </Link>
          <Link
            href="/questionnaire"
            className={`${pathname.startsWith('/questionnaire') ? 'font-medium' : 'text-muted-foreground'} transition-colors hover:text-foreground`}
          >
            {t('questionsList')}
          </Link>
          <Link
            href="/records"
            className={`${pathname.startsWith('/records') ? 'font-medium' : 'text-muted-foreground'} flex items-center gap-1.5 transition-colors hover:text-foreground`}
          >
            <FolderClock className="h-4 w-4" />
            测评档案
          </Link>
        </nav>
      </div>
    </header>
  );
}
