import { useNavigate } from 'react-router-dom';
import { useT } from '../i18n/LanguageContext';

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

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

  const items: MenuItem[] = [
    { label: t('more.leaderboard'), icon: '\u{1F3C6}', path: '/leaderboard' },
    { label: t('settings.title'), icon: '\u{2699}\u{FE0F}', path: '/settings' },
  ];

  return (
    <div className="more-page">
      <h2 className="more-title">{t('nav.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 className="more-foot">
        <span className="more-nc">🔒 {t('more.nonCustodial')}</span>
        <span className="more-ver">Поликопи · v2.0</span>
      </div>
    </div>
  );
}