import * as React from 'react';
import Link from 'next/link';

import { auth } from '@/auth';
import { Button } from '@/components/ui/Button';
import { UserMenu } from '@/components/UserMenu';

async function UserOrLogin() {
	const session = await auth();
	return (
		<>
			<div className="flex items-center">
				{/* <IconSeparator className="size-6 text-muted-foreground/50" /> */}
				{session?.user ? (
					<UserMenu user={session.user} />
				) : (
					<Button variant="link" asChild className="-ml-2">
						<Link href="/sign-in?callbackUrl=/">Login</Link>
					</Button>
				)}
			</div>
		</>
	);
}

export function Header() {
	return (
		<header className="sticky top-0 z-50 flex items-center justify-end w-full h-16 px-8 border-b shrink-0 bg-gradient-to-b from-background/10 via-background/50 to-background/80 backdrop-blur-xl">
			<React.Suspense fallback={<div className="flex-1 overflow-auto" />}>
				<UserOrLogin />
			</React.Suspense>
		</header>
	);
}