'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { ClipboardList } 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="container flex items-center justify-between h-14 px-4 max-w-6xl mx-auto">
        <Link href="/" className="text-lg font-medium flex items-center gap-2">
          <span className="w-8 h-8 border rounded flex items-center justify-center">
            <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="font-medium hover:text-foreground transition-colors"
          >
            {t('introduce')}
          </Link>
          <Link
            href="/questionnaire"
            className={`${
              pathname.startsWith('/questionnaire')
                ? 'font-medium'
                : 'text-muted-foreground'
            } hover:text-foreground transition-colors`}
          >
            {t('questionsList')}
          </Link>
        </nav>
      </div>
    </header>
  );
}