import { authOptions } from '@/lib/authOptions'
import { getServerSession } from 'next-auth'
import LogoutButton from './LogoutButton';
import LoginButton from './LoginButton';
import Link from 'next/link';

const Header = async () => {
    const session = await getServerSession(authOptions);
  return (
    <header className="p-4 border border-b-[#9BBEC8] px-4 md:px-10">
        <div className='flex justify-between items-center'>
            <Link href="/" className="logo text-[#427D9D] font-semibold">Task Management</Link>
            <div>
                {session && (
                    <div className='flex justify-center items-center'>
                        <div className='hidden gap-1 md:flex'>
                            <p className='font-bold'>Hello, </p> {session?.user?.name}
                        </div>
                        <LogoutButton/>
                    </div>
                )}
                {!session && (
                    <div className='text-sm md:text-base'>
                        Not logged in
                        <LoginButton/>
                    </div>
                )}
            </div>
        </div>
    </header>
  )
}

export default Header