import { Flex, Tabs } from '@chakra-ui/react'

// This component needs to be nested inside of a Tabs.Root to work properly
export function CanvasHeaderTabs({ view, onChangeView, tabs }) {
    return (
            <Flex 
            as="header"
            position="sticky"
            top="0"
            zIndex="dropdown" // zIndex: 1100
            bg="base200"
            px={5}
            pt={3}
            pb={2}
            align="center"
            justify="space-between"
            width="100%"
            >
            <Tabs.List>
                {tabs.map(({ value, label }) =>
                    <Tabs.Trigger key={value} value={value} fontSize="lg">
                        { label }
                    </Tabs.Trigger>
                )}
            </Tabs.List>
        </Flex>
    )
}