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

export default function CanvasHeader() {
    return (
        <>
            <Flex
                as="header"
                position="sticky"
                top="0"
                zIndex="banner"
                bg="white"
                borderBottom="1px solid"
                borderColor="gray.200"
                px={6}
                py={3}
                align="center"
                justify="space-between"
            >
                <CanvasHeaderNav />
                <HStack spacing={3}>
                    <SearchBar />
                    <SettingsButton />
                </HStack>
            </Flex>
        </>
    );
}