import React from 'react';
import { AppScreen } from '../types';

interface BottomNavProps {
  currentScreen: AppScreen;
  setScreen: (screen: AppScreen) => void;
}

export const BottomNav: React.FC<BottomNavProps> = ({ currentScreen, setScreen }) => {
  const navItems = [
    { id: AppScreen.LIBRARY, label: 'Полка', icon: 'library_books' },
    { id: AppScreen.CATEGORIES, label: 'Категории', icon: 'category' },
    { id: AppScreen.WISHLIST, label: 'Вишлист', icon: 'bookmark' },
    { id: AppScreen.SETTINGS, label: 'Настройки', icon: 'settings' },
  ];

  return (
    <nav className="fixed bottom-0 z-50 w-full max-w-md glass-nav pb-safe">
      <div className="flex items-center justify-around h-16 px-2">
        {navItems.map((item) => (
          <button
            key={item.id}
            onClick={() => setScreen(item.id)}
            className={`flex flex-col items-center justify-center w-full h-full gap-1 transition-colors ${
              currentScreen === item.id || (item.id === AppScreen.CATEGORIES && currentScreen === AppScreen.CATEGORIES)
                ? 'text-primary'
                : 'text-slate-400 dark:text-slate-500 hover:text-slate-600 dark:hover:text-slate-300'
            }`}
          >
            <span className={`material-symbols-outlined text-[24px] ${currentScreen === item.id ? 'fill-current' : ''}`}>
              {item.icon}
            </span>
            <span className="text-[10px] font-medium">{item.label}</span>
          </button>
        ))}
      </div>
      <div className="h-5 w-full"></div>
    </nav>
  );
};