import React from 'react';
import { Link, useLocation } from 'react-router-dom';

const ResonanceMenu = () => {
  const location = useLocation();
  const menuItems = [
    { path: '/resonance', name: 'Tutorial' },
    { path: '/resonance/selection', name: 'Setup' },
    { path: '/resonance/practice', name: 'Practice' },  
  ];

  const isPracticePage = location.pathname === '/resonance/practice';

  const handlePracticeClick = (e) => {
    if (!isPracticePage) {
      alert('You must select at least one vowel on Setup Page first');
      e.preventDefault();
    }
  };


  return (
    <nav className="nav">
      {menuItems.map((item, index) => (
        <React.Fragment key={item.name}>
        <Link 
            to={item.path} 
            className={`link ${location.pathname === item.path ? 'active' : ''}`}
            onClick={item.path === '/resonance/practice' ? handlePracticeClick : undefined}
          >
            {item.name}
          </Link>
          {index < menuItems.length - 1 && <span className="separator">|</span>}
        </React.Fragment>
      ))}
    </nav>
  );
}

export default ResonanceMenu;