# `header.tsx`

import { NavBar, Button, Popover, Menu, Acccount } from "@kanvas-ui";
import { useCart, useAccount, useDisconnect, Only } from "@tzconnect/kanvas-hooks";
import { Logo, Connect} from "components";
import { Spacer} from "@chakra-ui/react";
 
export const Header = () => {
    const { isReady, isConnecting, address , info } = useAccount();
    const cart = useCart();
    const disconnect = useDisconnect();
    
    return (
        <NavBar>
        
            <Logo href="/"/>
            <Spacer/>
        
            <NavBar.Desktop>
                <NavBar.Link href="/explore"> explore </NavBar.Link>
                <NavBar.Link href="/resources"> Resources </NavBar.Link>
                <Only.NotConnected>
                    <Popover>
                        <Button>Sing in</Button>
                        <Connect
                            heading="Sing in"
                            text="To view your digital collectables sign in using your preferred social
                            account or connect via an existing wallet."
                         />  
                     </Popover>
                </Only.NotConnected>
            </NavBar.Desktop>
        
            <Only.Connected>
                <Menu>
                    <NavBar.ProfileButton address={address}/>
                    <Acccount address={address} info={info} variant="header"/>
                    <Menu.Separator />
                    <Menu.Item href=`/${address}`> My collection </Menu.Item>
                    <Menu.Item href="/resources/help"> Help Center </Menu.Item>
                    <Menu.Item onClick={() => disconnect()}> Help </Menu.Item>
                <Menu>
            </Only.Connected>

            <Only.CartNotEmpty>
                <Popover>
                    <NavBar.CartButton />
                    <Cart {...cart} checkoutHref="/checkout"/>
                    {/* or <Cart> with loop of <Cart.Item> */}
                </Popover>             
            <Only.CartNotEmpty/>

            <NavBar.Mobile>
                <NavBar.FullScreenMenu forceClose={isConnecting}> 
                    <NavBar.HamburgerButton />
                    <NavBar.Link href="/explore"> Explore </NavBar.Link>
                    <NavBar.Link href="/resources"> Resources </NavBar.Link>
                    <NavBar.Link href="#" external> Twitter </NavBar.Link>
                    <NavBar.Link href="#" external> Instagram </NavBar.Link>
                    <NavBar.Link href="#" external> Discord </NavBar.Link>
                    <Spacer/>
                    <NavBar.Link href="/policies/terms"> Terms of service </NavBar.Link>
                    <NavBar.Link href="/policies/privacy"> Privacy policy </NavBar.Link>  
                    <Only.NotConnected>
                        <Modal forceClose={isConnecting}> 
                            <Button>Sing in</Button>
                            <Connect
                                heading="Sing in"
                                text="To view your digital collectables sign in using your preferred social
                                account or connect via an existing wallet."
                             />  
                        </Modal>
                    </Only.NotConnected>              
                </NavBar.FullScreenMenu>
            </NavBar.Mobile>

        </NavBar>
    );
}