import Link from 'next/link';
import { auth } from '@clerk/nextjs/server';

import { Logo } from '@/components/logo';
import { Button } from '@/components/ui/button';
import { ModeToggle } from '@/components/ui/mode-toggle';

export const Navbar = async () => {
  const { userId } = await auth();

  let isSignedIn = !!userId;

  return (
    <nav className='fixed top-0 z-50 flex h-14 w-full items-center border-b bg-white px-4 shadow-sm dark:bg-black'>
      <div className='mx-auto flex w-full items-center justify-between md:max-w-screen-2xl'>
        <Logo />
        <div className='ml-0 flex w-full flex-auto items-center space-x-1 md:ml-6 md:block md:w-auto md:space-x-4'>
          <Button size='sm' variant='ghost' asChild>
            <Link href='/blog'>Blog</Link>
          </Button>
          <Button size='sm' variant='ghost' asChild>
            <Link href='https://docs.tasko.ahmadk953.org/'>Docs</Link>
          </Button>
        </div>
        <div className='flex w-full items-center justify-between space-x-4 md:block md:w-auto'>
          {!isSignedIn ? (
            <div className='flex w-full justify-between space-x-4 md:block md:w-auto'>
              <Button size='sm' variant='outline' asChild>
                <Link href='/sign-in'>Login</Link>
              </Button>
              <Button size='sm' asChild>
                <Link href='/sign-up'>Get Tasko for Free</Link>
              </Button>
              <ModeToggle />
            </div>
          ) : (
            <div className='flex w-full justify-between space-x-4 md:block md:w-auto'>
              <Button size='sm' variant='outline' asChild>
                <Link href='/select-org'>Dashboard</Link>
              </Button>
              <ModeToggle />
            </div>
          )}
        </div>
      </div>
    </nav>
  );
};