import { User } from "next-auth"
import Link from "next/link"
import { PopoverSort } from "./filter-sort-games-mobile"
import { GameUnityLogo } from "./logo"
import { MobileSheet } from "./nav-mobile-sheet"
import SearchInput from "./search/components/search-input"
import { Button } from "./ui/button"
import { UserAccountDropdown } from "./user-nav"

export const Header = ({ user }: { user: User | undefined }) => {
    return (
        <header className="sticky top-0 z-50 border-b bg-background">
            <div className="mx-3 md:container flex h-16 items-center justify-between">
                <div className="flex gap-6 md:gap-10">
                    <Link href="/home" className="items-center space-x-2 flex">
                        <Button variant="ghost" size="logo">
                            <GameUnityLogo className="h-8 w-8" />
                        </Button>
                    </Link>
                </div>

                <SearchInput className="p-3 w-3/6 2xl:w-2/6" />

                {user &&
                    <div className="hidden md:block">
                        <UserAccountDropdown
                            user={{
                                name: user.name,
                                image: user.image,
                                username: user.username,
                            }}
                        />
                    </div>
                }

                <div className="md:hidden">
                    <MobileSheet user={user} />
                </div>
            </div>

        </header>
    )
}