import { useTranslation } from '../contexts/LanguageContext';
import { useSidebar } from '../contexts/SidebarContext';
import TabsScroller from '../components/TabsScroller';
import { SwipeableContent } from '../components/SwipeableContent';
import '../styles/AdminPanel.css';

export default function Feature2() {
  const { t } = useTranslation();
  const { toggleMobileMenu } = useSidebar();

  return (
    <SwipeableContent className="main-content">
      <div className="page-tabs-container">
        <TabsScroller className="page-tabs-slider">
          <button className="mobile-menu-btn" onClick={toggleMobileMenu} aria-label={t.theme.toggleMenu}>
            <span className="material-symbols-outlined">menu</span>
          </button>
          <div className="page-title-section">
            <span className="page-title-text">{t.features.feature2}</span>
          </div>
        </TabsScroller>
      </div>

      <div className="page-content">
        <div className="tab-content-placeholder">
          <div className="placeholder-icon">
            <span className="material-symbols-outlined">download</span>
          </div>

          <h3>{t.features.feature2}</h3>
          <p>{t.features.comingSoon}</p>
        </div>
      </div>
    </SwipeableContent>
  );
}