import { Box, Text, Heading, DataList, Flex, HStack, Tabs } from '@chakra-ui/react';
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import { CanvasHeaderTabs } from '../../components/dashboard/CanvasHeaderTabs.jsx';
import { VOLCANO_TABS } from '@/constants/viewKeys.js';
import { VolcanoHome } from './tabs/VolcanoHome.jsx';
import { PartnerData } from './tabs/PartnerData.jsx';
import { Reports } from './tabs/Reports.jsx';
import { OfficialInstitutions } from './tabs/OfficialInstitutions.jsx';
import { SocialMedia } from './tabs/SocialMedia.jsx';
import { SearchBar } from "../../components/dashboard/SearchBar.jsx";
import { SettingsButton } from "../../components/dashboard/SettingsButton.jsx";

export default function Volcano() {
    return (
        <Tabs.Root
            variant="line"
            width="100%"
            height="100%"
            lazyMount
        >       
            <Flex 
                as="header"
                position="sticky"
                top="0"
                zIndex="dropdown" // zIndex: 1100
                bg="base200"
                p={5}
                align="center"
                justify="space-between"
                width="100%"
            > 
                {/* SUB HEADER */}
                <CanvasHeaderTabs tabs={VOLCANO_TABS} />
                <HStack width="258px" justifyContent="flex-end">
                    <SearchBar />
                    <SettingsButton />
                </HStack>
            </Flex>
            
            {/* SUB CONTENT */}
            <Tabs.Content value="volcanohome">
                <VolcanoHome />
            </Tabs.Content>
            <Tabs.Content value="partner">
                <PartnerData />
            </Tabs.Content>
            <Tabs.Content value="reports">
                <Reports />
            </Tabs.Content>
            <Tabs.Content value="official">
                <OfficialInstitutions />
            </Tabs.Content>
            <Tabs.Content value="social">
                <SocialMedia />
            </Tabs.Content>
        </Tabs.Root>
    );
}