import React from "react";
import {Button, HStack, Stack, Tab, TabList, TabPanel, TabPanels, Tabs} from "@chakra-ui/react";

const DelightTabs = (props: any) => {
    const {tabs, tabPanels} = props;
    return (
        <>
            <Stack h="965px" w="100%" spacing={"0px"}>
                <HStack
                    borderBottom={"1px solid #E5E5E5"}
                    w="100%"
                    px="50px"
                    h="71px"
                    py="16px"
                    justify="space-between"
                >
                    <HStack spacing="18px">
                        <Button
                            fontWeight="700"
                            fontFamily={"Inter"}
                            fontSize="13px"
                            lineHeight={"18px"}
                            color="#4138C2"
                            border="1px solid #4138C2 "
                            borderRadius={"3px"}
                            w="93px"
                            h="38px"
                            bg="transparent"
                            alignSelf="flex-end"
                        >
                            Campaigns
                        </Button>
                    </HStack>
                </HStack>
                <Stack
                    w="1440px"
                    px="50px"
                    h="894px"
                    py="20px"
                    alignItems={"center"}
                    spacing={"23px"}
                    bg="#F9FAFD"
                >
                    <Tabs isFitted>
                        <TabList bg="white" border="none" w="1327px">
                            {tabs.map((tab: any) => (
                                <Tab
                                    height="46px"
                                    fontWeight="700"
                                    fontFamily={"Inter"}
                                    fontSize="17px"
                                    lineHeight={"20.57px"}
                                    color="#ACABAB"
                                    _selected={{
                                        color: "#4138C2",
                                        borderBottom: "3px solid #4138C2",
                                        borderColor: "#4138C2",
                                    }}
                                >
                                    {tab}
                                </Tab>
                            ))}
                        </TabList>

                        <TabPanels>
                            {tabPanels.map((tabPanel: any) => (
                                <TabPanel py="25px" px={"0px"}>
                                    {tabPanel}
                                </TabPanel>
                            ))}
                        </TabPanels>
                    </Tabs>
                </Stack>
            </Stack>
        </>
    );
};

export default DelightTabs;