import { useNavigate } from 'react-router-dom';

interface MenuItem {
  label: string;
  icon: string;
  path: string;
  badge?: string;
}

export default function MorePage() {
  const navigate = useNavigate();

  const items: MenuItem[] = [
    { label: 'Leaderboard', icon: '\u{1F3C6}', path: '/leaderboard' },
    { label: 'Settings', icon: '\u{2699}\u{FE0F}', path: '/settings' },
  ];

  return (
    <div className="more-page">
      <h2 className="more-title">More</h2>

      <div className="more-list">
        {items.map(item => (
          <button key={item.path} className="more-item" onClick={() => navigate(item.path)}>
            <span className="more-icon">{item.icon}</span>
            <span className="more-label">{item.label}</span>
            {item.badge && <span className="more-badge">{item.badge}</span>}
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
              width="16" height="16" className="more-arrow">
              <path d="M9 18l6-6-6-6" />
            </svg>
          </button>
        ))}
      </div>
    </div>
  );
}