import type { ScreenId } from '../../app/navigation.js';
import { navItems } from '../../app/navigation.js';

type BottomNavProps = {
  activeScreen: ScreenId;
  onNavigate: (screen: ScreenId) => void;
};

export function BottomNav({ activeScreen, onNavigate }: BottomNavProps) {
  return (
    <nav className="bottom-nav" aria-label="Primary navigation">
      {navItems.map((item) => {
        const Icon = item.icon;
        const active = item.id === activeScreen;

        return (
          <button
            aria-current={active ? 'page' : undefined}
            className="bottom-nav__item"
            key={item.id}
            onClick={() => onNavigate(item.id)}
            type="button"
          >
            <Icon aria-hidden="true" size={20} strokeWidth={2.4} />
            <span>{item.label}</span>
          </button>
        );
      })}
    </nav>
  );
}