import { Calendar, Settings, CalendarDays } from 'lucide-react';

interface Props {
    currentView: string;
    onNavigate: (view: string) => void;
}

export function MobileNavigation({ currentView, onNavigate }: Props) {
    const menuItems = [
        { id: 'calendar', label: 'Mensual', icon: Calendar },
        { id: 'yearly', label: 'Anual', icon: CalendarDays },
        { id: 'settings', label: 'Ajustes', icon: Settings },
    ];

    return (
        <div className="md:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-emerald-950/90 backdrop-blur-xl border-t border-stone-200 dark:border-emerald-900/30 z-50 pb-safe">
            <div className="flex justify-around items-center p-2">
                {menuItems.map((item) => {
                    const Icon = item.icon;
                    const isActive = currentView === item.id;

                    return (
                        <button
                            key={item.id}
                            onClick={() => onNavigate(item.id)}
                            className={`
                flex flex-col items-center justify-center p-2 rounded-xl transition-all duration-300
                ${isActive
                                    ? 'text-emerald-600 dark:text-emerald-400'
                                    : 'text-stone-400 dark:text-emerald-600/40 hover:text-stone-600 dark:hover:text-emerald-400/80'
                                }
              `}
                        >
                            <div className={`
                p-2 rounded-xl mb-1 transition-all duration-300
                ${isActive
                                    ? 'bg-emerald-100 dark:bg-emerald-900/40'
                                    : 'bg-transparent'
                                }
              `}>
                                <Icon className={`w-6 h-6 ${isActive ? 'scale-110' : ''}`} />
                            </div>
                            <span className={`text-[10px] font-bold ${isActive ? 'opacity-100' : 'opacity-70'}`}>
                                {item.label}
                            </span>
                        </button>
                    );
                })}
            </div>
        </div>
    );
}