import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { Home, BarChart2, Calendar, Settings } from 'lucide-react';
import { cn } from '@/lib/utils';

const NavBar = () => {
  const navigate = useNavigate();
  const location = useLocation();
  
  // 설정 관련 경로 목록 추가
  const settingsRelatedPaths = [
    '/settings', 
    '/profile', 
    '/security-privacy',
    '/help-support',
    '/payment-methods',
    '/notifications'
  ];
  
  const isSettingsActive = settingsRelatedPaths.some(path => location.pathname === path);
  
  const navItems = [
    { icon: Home, label: '홈', path: '/', isActive: location.pathname === '/' },
    { icon: Calendar, label: '지출', path: '/transactions', isActive: location.pathname === '/transactions' },
    { icon: BarChart2, label: '분석', path: '/analytics', isActive: location.pathname === '/analytics' },
    { icon: Settings, label: '설정', path: '/settings', isActive: isSettingsActive },
  ];
  
  return (
    <div className="fixed bottom-0 left-0 right-0 p-4 z-10 animate-slide-up">
      <div className="neuro-flat mx-auto max-w-[500px] flex justify-around items-center py-3 px-6">
        {navItems.map((item) => {
          return (
            <button
              key={item.path}
              onClick={() => navigate(item.path)}
              className={cn(
                "flex flex-col items-center gap-1 p-2 rounded-lg transition-all duration-300",
                item.isActive ? "text-neuro-income" : "text-gray-500"
              )}
            >
              <div 
                className={cn(
                  "p-2 rounded-full transition-all duration-300",
                  item.isActive ? "neuro-pressed" : "neuro-flat"
                )}
              >
                <item.icon size={20} />
              </div>
              <span className="text-xs font-medium">{item.label}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
};

export default NavBar;