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

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

    return (
        <SwipeableContent className="main-content">
            <MobileTitleBar
                title={t.feature1.title}
                menuLabel={t.theme.toggleMenu}
                onMenuClick={toggleMobileMenu}
            />
            <div className="page-tabs-container">
                <TabsScroller className="page-tabs-slider">
                    <div className="page-title-section">
                        <span className="page-title-text">{t.feature1.title}</span>
                    </div>
                </TabsScroller>
            </div>

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

                    <h3>{t.feature1.title}</h3>
                    <p>{t.feature1.comingSoon}</p>
                </div>
            </div>
        </SwipeableContent>
    );
}