import { Flex, HStack, chakra, useRecipe } from "@chakra-ui/react";
import { CanvasHeaderNav } from "./CanvasHeaderNav";
import { SearchBar } from "./SearchBar";
import { SettingsButton } from "./SettingsButton";



export default function CanvasHeader() {
    const recipe = useRecipe({ key: "canvas" });
    const styles = recipe();
    return (
        <chakra.div css={styles}>
            <Flex
                as="header"
                position="sticky"
                top="0"
                // zIndex="banner"
                bg="base200"
                borderBottom="1px solid"
                borderColor="gray.200"
                px={6}
                py={3}
                align="center"
                justify="space-between"
            >
                <CanvasHeaderNav />
                <HStack spacing={3}>
                    <SearchBar />
                    <SettingsButton />
                </HStack>
            </Flex>
        </chakra.div>
    );
}