import { NavLink } from 'react-router-dom';
import './BottomNav.css';

const NAV_ITEMS = [
  { to: '/', label: 'DASHBOARD', icon: '⊞' },
  { to: '/logs', label: 'LOGS', icon: '≡' },
  { to: '/map', label: 'MAP', icon: '◎' },
  { to: '/scraper', label: 'SCRAPER', icon: '⟳' },
];

export function BottomNav() {
  return (
    <nav className="bottom-nav">
      {NAV_ITEMS.map(({ to, label, icon }) => (
        <NavLink
          key={to}
          to={to}
          end={to === '/'}
          className={({ isActive }) => `nav-item${isActive ? ' nav-item--active' : ''}`}
        >
          <span className="nav-icon">{icon}</span>
          <span className="nav-label">{label}</span>
        </NavLink>
      ))}
    </nav>
  );
}
