import Link from "next/link"

import { cn } from "@/lib/utils"
import { User } from "next-auth"
import { GameUnityLogo } from "./logo"
import SearchInput from "./search/components/search-input"
import { Button, buttonVariants } 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="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={cn(buttonVariants({ variant: "ghost", size: "logo" }))}>
                        <UserAccountDropdown
                            user={{
                                name: user.name,
                                image: user.image,
                                username: user.username,
                            }}
                        />
                    </div>
                    :
                    <span className="w-12" />
                }
            </div>
        </header>
    )
}