'use client';

import useGlobalStore from '@/config/use-global';
import { buttonVariants } from '@workspace/ui/components/button';
import { cn } from '@workspace/ui/lib/utils';
import { useTranslations } from 'next-intl';
import Image from 'next/legacy/image';
import Link from 'next/link';
import LanguageSwitch from '../language-switch';
// import ThemeSwitch from '../theme-switch';
import { useLoginDialog } from '@/app/auth/LoginDialogContext';
import { UserNav } from '../user-nav';

export default function Header() {
  const t = useTranslations('common');

  const { user } = useGlobalStore();
  const Logo = (
    <Link href='/' className='-mt-2.5 flex items-center gap-2 font-bold'>
      <Image src={'image.png'} width={102} height={49} alt='logo' objectFit='cover' unoptimized />
    </Link>
  );

  const { openLoginDialog } = useLoginDialog();
  return (
    <>
      <header className='fixed top-10 z-50 w-full'>
        <div className={'container'}>
          <div className='flex h-[60px] items-center justify-between rounded-[50px] bg-white pl-4 pr-1 sm:h-[73px] md:pl-7'>
            <nav className='flex-col gap-6 font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6'>
              {Logo}
            </nav>
            <div className='flex h-full flex-1 items-center justify-end gap-2 py-1'>
              <LanguageSwitch />
              {/*<ThemeSwitch />*/}
              <UserNav />
              {!user && (
                <Link
                  href='#'
                  onClick={() => openLoginDialog()}
                  className={cn(
                    buttonVariants({
                      size: 'lg',
                      variant: 'outline',
                    }),
                    'h-full rounded-[50px] border-0 border-[#0F2C53] bg-[#0F2C53] px-5 text-[16px] font-bold text-white transition hover:bg-[#225BA9] hover:text-white sm:px-14 sm:text-2xl',
                  )}
                >
                  {t('login')}
                </Link>
              )}
            </div>
          </div>
        </div>
      </header>
    </>
  );
}