import { useAuth } from '../../contexts/AuthContext';
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 Sources() {
    const { user: currentUser } = useAuth();
    const { t } = useTranslation();
    const { toggleMobileMenu } = useSidebar();

    if (!currentUser?.is_superuser) {
        return null;
    }

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

            <div className="admin-tab-content">
                <div className="tab-content-placeholder">
                    <div className="placeholder-icon">
                        <span className="material-symbols-outlined">database</span>
                    </div>
                    <h3>{t.sourcesPage.title}</h3>
                    <p>{t.sourcesPage.comingSoon}</p>
                </div>
            </div>
        </SwipeableContent>
    );
}