import { useCallback, useState } from 'react';
import BriefingTab from './tabs/BriefingTab';
import AnalysisTab from './tabs/AnalysisTab';
import PurchaseTab from './tabs/PurchaseTab';
import { useIsMobile } from '../../hooks/useIsMobile';
import SwipeableView from '../../components/SwipeableView';

const TABS = [
    { id: 'briefing', label: '🗓 이번 주 브리핑' },
    { id: 'analysis', label: '📚 자료실 / Deep Dive' },
    { id: 'purchase', label: '💰 구매·성과' },
];

export default function Functions() {
    const [tab, setTab] = useState('briefing');
    const isMobile = useIsMobile();

    const tabIndex = TABS.findIndex(t => t.id === tab);

    const handleTabChange = useCallback((index) => {
        setTab(TABS[index].id);
    }, []);

    return (
        <div className="lotto-functions">
            {isMobile ? (
                <SwipeableView
                    tabs={TABS.map(t => ({
                        key: t.id,
                        label: t.label,
                        content: t.id === 'briefing' ? <BriefingTab /> : t.id === 'analysis' ? <AnalysisTab /> : <PurchaseTab />,
                    }))}
                    activeIndex={tabIndex}
                    onTabChange={handleTabChange}
                />
            ) : (
                <>
                    <nav className="lotto-tabs">
                        {TABS.map(t => (
                            <button
                                key={t.id}
                                className={tab === t.id ? 'active' : ''}
                                onClick={() => setTab(t.id)}
                            >{t.label}</button>
                        ))}
                    </nav>
                    <div className="lotto-tab-body">
                        {tab === 'briefing' && <BriefingTab />}
                        {tab === 'analysis' && <AnalysisTab />}
                        {tab === 'purchase' && <PurchaseTab />}
                    </div>
                </>
            )}
        </div>
    );
}