import {
  Box,
  Image,
  Tab,
  TabList,
  TabPanel,
  TabPanels,
  Tabs,
  Text,
} from "@chakra-ui/react";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import Academicdetails from "./Academicdetails";
import AcademicVideo from "./AcademicVideo";
import AcademicDocuments from "./AcademicDocuments";
const Academy = () => {
  return (
    <Box
      {...OPACITY_ON_LOAD}
      overflowY={"scroll"}
      height={"100vh"}
      pb={38}
      pt={"3"}
    >
      <Box bg="white.500">
        <Tabs>
          <TabList>
            <Tab
              fontSize={"sm"}
              _selected={{
                color: "#004118",
                borderBottom: "2px solid #38a169",
              }}
            >
              Academic details
            </Tab>
            <Tab
              fontSize={"sm"}
              _selected={{
                color: "#004118",
                borderBottom: "2px solid #38a169",
              }}
            >
              Academic Video
            </Tab>
            <Tab
              fontSize={"sm"}
              _selected={{
                color: "#004118",
                borderBottom: "2px solid #38a169",
              }}
            >
              Academic Documents
            </Tab>
          </TabList>

          <TabPanels>
            <TabPanel>
              <Academicdetails />
              {/* <manageAcademyAdd /> */}
            </TabPanel>
            <TabPanel>
              <AcademicVideo />
            </TabPanel>
            <TabPanel>
              <AcademicDocuments />
            </TabPanel>
          </TabPanels>
        </Tabs>
      </Box>
    </Box>
  );
};

export default Academy;
