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 navItems = [
    { icon: Home, label: '홈', path: '/' },
    { icon: Calendar, label: '거래', path: '/transactions' },
    { icon: BarChart2, label: '분석', path: '/analytics' },
    { icon: Settings, label: '설정', path: '/settings' },
  ];
  
  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-md flex justify-around items-center py-3 px-6">
        {navItems.map((item) => {
          const isActive = location.pathname === item.path;
          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",
                isActive ? "text-neuro-accent" : "text-gray-500"
              )}
            >
              <div 
                className={cn(
                  "p-2 rounded-full transition-all duration-300",
                  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;