'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { cn } from '@/lib/utils';
import { useUser } from './useUser';
import { baseNavItems } from './constants';
import { useI18n } from '@/lib/i18n';

/** Single source of dashboard navigation — used by the sidebar and the mobile drawer. */
export function DashboardNavLinks({ onNavigate }: { onNavigate?: () => void }) {
  const pathname = usePathname();
  const { data: user } = useUser();
  const { t } = useI18n();

  const isPro = ['pro', 'business', 'enterprise'].includes(user?.tier ?? '');
  const navItems = isPro ? baseNavItems : baseNavItems.filter(item => !item.proOnly);

  return (
    <>
      {navItems.map((item) => {
        const isActive = pathname === item.href;
        return (
          <Link
            key={item.href}
            href={item.href}
            onClick={onNavigate}
            className={cn(
              'flex items-center gap-4 rounded-2xl px-6 py-4 text-[11px] font-black uppercase tracking-[0.2em] transition-all duration-200',
              isActive
                ? 'bg-brand-dark text-white shadow-xl dark:bg-brand-accent dark:text-brand-dark'
                : 'text-brand-dark/65 dark:text-white/65 hover:bg-brand-muted dark:hover:bg-[#1f1f1f]'
            )}
          >
            <item.icon size={18} className="shrink-0" />
            {t(item.labelKey)}
          </Link>
        );
      })}
    </>
  );
}
