'use client';

import { useRouter, usePathname } from 'next/navigation';
import { ChevronLeft, Home, HelpCircle } from 'lucide-react';

export default function BottomNav() {
  const router = useRouter();
  const pathname = usePathname();

  // На главной не показываем
  if (pathname === '/') return null;

  return (
    <nav
      className="fixed bottom-0 left-0 right-0 z-40 border-t safe-area-bottom"
      style={{ borderColor: 'var(--border)', background: 'var(--bg-card)' }}
    >
      <div className="flex items-center justify-around py-2 max-w-2xl mx-auto">
        {/* Назад */}
        <button
          onClick={() => router.back()}
          className="flex flex-col items-center gap-1 px-4 py-1 transition-all active:scale-95"
          style={{ color: 'var(--text-primary)' }}
        >
          <ChevronLeft className="w-6 h-6" />
          <span className="text-[10px]">Назад</span>
        </button>

        {/* Главная */}
        <button
          onClick={() => router.push('/')}
          className="flex flex-col items-center gap-1 px-4 py-1 transition-all active:scale-95"
          style={{ color: pathname === '/' ? 'var(--primary)' : 'var(--text-primary)' }}
        >
          <Home className="w-6 h-6" />
          <span className="text-[10px]">Главная</span>
        </button>

        {/* Помощь */}
        <button
          onClick={() => router.push('/help')}
          className="flex flex-col items-center gap-1 px-4 py-1 transition-all active:scale-95"
          style={{ color: pathname === '/help' ? 'var(--primary)' : 'var(--text-primary)' }}
        >
          <HelpCircle className="w-6 h-6" />
          <span className="text-[10px]">Помощь</span>
        </button>
      </div>
    </nav>
  );
}
