import React from 'react';
import { motion } from 'framer-motion';
import { Home, Search, Plus, MessageCircle, User } from 'lucide-react';
import { cn } from '../../lib/utils';

const navItems = [
  { icon: Home, label: 'Home', id: 'home' },
  { icon: Search, label: 'Search', id: 'search' },
  { icon: Plus, label: 'Sell', id: 'sell', isMain: true },
  { icon: MessageCircle, label: 'Chat', id: 'chat' },
  { icon: User, label: 'Profile', id: 'profile' },
];

const MobileNav = ({ activeView, onViewChange }) => {
  return (
    <motion.div
      initial={{ y: 100 }}
      animate={{ y: 0 }}
      className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50"
    >
      <div className="glass-panel px-2 py-3 flex items-center gap-2 shadow-2xl shadow-black/50">
        {navItems.map((item) => (
          <button
            key={item.id}
            onClick={() => onViewChange(item.id)}
            className={cn(
              "relative flex flex-col items-center justify-center w-12 h-12 rounded-2xl transition-all duration-300",
              item.isMain
                ? "bg-white text-black -mt-6 shadow-[0_0_20px_rgba(255,255,255,0.3)]"
                : "text-white/60 hover:text-white hover:bg-white/5",
              activeView === item.id && !item.isMain && "text-white"
            )}
          >
            <item.icon size={item.isMain ? 24 : 20} strokeWidth={2} />
            {activeView === item.id && !item.isMain && (
              <motion.div
                layoutId="active-dot"
                className="absolute -bottom-1 w-1 h-1 bg-white rounded-full"
              />
            )}
          </button>
        ))}
      </div>
    </motion.div>
  );
};

export default MobileNav;