import { NavLink } from 'react-router-dom';
import { Home, Trophy, User } from 'lucide-react';
import styles from './BottomNav.module.css';

export default function BottomNav() {
  const linkClass = ({ isActive }: { isActive: boolean }) =>
    isActive ? styles.tabActive : styles.tab;

  return (
    <nav className={styles.bottomNav}>
      <NavLink to="/" end className={linkClass}>
        <Home size={20} />
        <span>Home</span>
      </NavLink>
      <NavLink to="/spiele" className={linkClass}>
        <span className={styles.emojiIcon}>⚽</span>
        <span>Spiele</span>
      </NavLink>
      <NavLink to="/rangliste" className={linkClass}>
        <Trophy size={20} />
        <span>Rangliste</span>
      </NavLink>
      <NavLink to="/profil" className={linkClass}>
        <User size={20} />
        <span>Profil</span>
      </NavLink>
    </nav>
  );
}