import React, { useEffect } from 'react';
import { useApp } from '../../context/AppContext';
import { showBackButton, hapticImpact, openExternalLink } from '../../services/auth';
import Overlay from '../common/Overlay';
import AboutPage from './AboutPage';
import CreateCard from './CreateCard';
import './MenuPanel.css';
export default function MenuPanel() {
const { isMenuOpen, closeMenu, menuScreen, setMenuScreen } = useApp();
// Telegram BackButton for sub-screens
useEffect(() => {
if (isMenuOpen && menuScreen !== 'menu') {
const cleanup = showBackButton(() => {
hapticImpact('light');
setMenuScreen('menu');
});
return cleanup;
}
if (isMenuOpen && menuScreen === 'menu') {
const cleanup = showBackButton(() => {
hapticImpact('light');
closeMenu();
});
return cleanup;
}
}, [isMenuOpen, menuScreen, setMenuScreen, closeMenu]);
if (!isMenuOpen) return null;
const handleNavigate = (screen) => {
hapticImpact('light');
setMenuScreen(screen);
};
const handleExternalLink = (url) => {
hapticImpact('light');
openExternalLink(url);
};
// Sub-screens
if (menuScreen === 'about') {
return (
<>
handleNavigate('menu')} />
);
}
if (menuScreen === 'create') {
return (
<>
handleNavigate('menu')} />
);
}
return (
<>
);
}