import React from 'react';
import { Compass, PlayCircle, Radio, User } from 'lucide-react';
import { UserTab } from '../types';

interface BottomNavProps {
  currentTab: UserTab;
  onTabChange: (tab: UserTab) => void;
}

const BottomNav: React.FC<BottomNavProps> = ({ currentTab, onTabChange }) => {
  const navItems = [
    { id: UserTab.Discovery, icon: Compass, label: '发现' },
    { id: UserTab.Library, icon: PlayCircle, label: '剧本' },
    { id: UserTab.Control, icon: Radio, label: '操控' },
    { id: UserTab.Profile, icon: User, label: '我的' },
  ];

  return (
    <div className="fixed bottom-0 left-0 w-full z-50">
      {/* Main Bar Content - High Transparency Glass */}
      <div className="bg-black/20 backdrop-blur-2xl border-t border-white/10 pb-safe">
        <div className="flex justify-around items-center h-[60px]">
          {navItems.map((item) => {
            const isActive = currentTab === item.id;
            return (
              <button
                key={item.id}
                onClick={() => onTabChange(item.id)}
                className="relative flex-1 flex flex-col items-center justify-center h-full group"
              >
                {/* Active Glow Background */}
                {isActive && (
                    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-12 bg-white/10 rounded-full blur-lg"></div>
                )}

                {/* Icon */}
                <div className={`transition-all duration-300 relative z-10 ${isActive ? 'text-white scale-110 drop-shadow-[0_0_10px_rgba(255,255,255,0.6)]' : 'text-white/50 group-hover:text-white/80'}`}>
                  <item.icon 
                    size={26} 
                    strokeWidth={isActive ? 2.5 : 1.5}
                  />
                </div>

                {/* Label */}
                <span className={`text-[10px] font-medium mt-1 transition-colors duration-300 relative z-10 ${isActive ? 'text-white' : 'text-white/40'}`}>
                  {item.label}
                </span>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default BottomNav;