import React from "react";
import "./../../index.css";
import {Stack, Tab, TabList, TabPanel, TabPanels, Tabs,} from "@chakra-ui/react";
import Header from "./Header";
import SlidesTab from "./SlidesTab";
import OverviewTab from "./OverviewTab";
import PreviewTab from "./PreviewTab";

interface inputProps {
    title: string;
    OnChange: any;
}

const BabuCreateActivity = () => {
    return (
        <>
            <Stack
                w="100%"
                bg="rgba(247, 248, 252, 1)"
                h="auto"
                spacing="48px"
                alignItems={"center"}
            >
                <Header title="Create Activity"/>
                <Stack w="100%" alignItems={"center"} pb="80px">
                    <Tabs align="center" variant="soft-rounded">
                        <TabList w="322px">
                            <Tab
                                w="113px"
                                h="30px"
                                _selected={{bg: "#DFE0EB"}}
                                fontFamily="MaisonBold"
                                color="black"
                                fontSize="14px"
                                fontStyle="normal"
                                fontWeight="700"
                                lineHeight="14px"
                                letterSpacing="0.50000001192092896px"
                                textAlign="center"
                            >
                                Overview
                            </Tab>
                            <Tab
                                w="113px"
                                h="30px"
                                _selected={{bg: "#DFE0EB"}}
                                fontFamily="MaisonBold"
                                color="black"
                                fontSize="14px"
                                fontStyle="normal"
                                fontWeight="700"
                                lineHeight="14px"
                                letterSpacing="0.50000001192092896px"
                                textAlign="center"
                            >
                                Slides
                            </Tab>
                            <Tab
                                w="113px"
                                h="30px"
                                _selected={{bg: "#DFE0EB"}}
                                fontFamily="MaisonBold"
                                color="black"
                                fontSize="14px"
                                fontStyle="normal"
                                fontWeight="700"
                                lineHeight="14px"
                                letterSpacing="0.50000001192092896px"
                                textAlign="center"
                            >
                                Preview
                            </Tab>
                        </TabList>
                        <TabPanels>
                            <TabPanel pt="40px">
                                <OverviewTab/>
                            </TabPanel>
                            <TabPanel pt="40px">
                                <SlidesTab/>
                            </TabPanel>
                            <TabPanel pt="40px">
                                <PreviewTab/>
                            </TabPanel>
                        </TabPanels>
                    </Tabs>
                </Stack>
            </Stack>
        </>
    );
};


export default BabuCreateActivity;