// Mobile Driver Tabs
// Purpose: Owns the shared mobile tab selector, state, and per-tab modules.
import { useCallback, useState } from 'react';
import Tabs, { Tab, TabList, TabPanels } from '../../../components/Tabs/index.jsx';
import MobileChatTab from '../tabs/mobile/ChatTab/index.jsx';
import RoomControlsTab from '../tabs/mobile/RoomControlsTab/index.jsx';
import ActivitiesTab from '../tabs/shared/ActivitiesTab/index.jsx';
import VipTab from '../tabs/shared/VipTab/index.jsx';
import VipTabButton from '../tabs/shared/VipTabButton/index.jsx';
import HelpTab from '../tabs/shared/HelpTab/index.jsx';
import SettingsTab from '../tabs/shared/SettingsTab/index.jsx';

export default function MobileTabs() {
  const [activeTab, setActiveTab] = useState('chat');
  const handleTabChange = useCallback((tab) => setActiveTab(tab), []);

  return (
    <section className="mobile-tabs-snap text-base">
      <Tabs defaultTab="chat" currentTab={activeTab} onTabChange={handleTabChange}>
        <TabList>
          <Tab id="chat">Chat</Tab>
          <Tab id="activities">Activities</Tab>
          <VipTabButton compact />
          <Tab id="roomcontrols">Room Controls</Tab>
          <Tab id="help">Help</Tab>
          <Tab id="settings">Settings</Tab>
        </TabList>
        <TabPanels>
          <MobileChatTab />
          <ActivitiesTab />
          <VipTab />
          <RoomControlsTab />
          <HelpTab />
          <SettingsTab />
        </TabPanels>
      </Tabs>
    </section>
  );
}