'use client';

import useGlobalStore from '@/config/use-global';
import { buttonVariants } from '@workspace/airo-ui/components/button';
import { cn } from '@workspace/airo-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={89} height={43} alt='logo' objectFit='cover' />
    </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-[10px] md:pl-6'>
            <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-2'>
              <LanguageSwitch />
              {/*<ThemeSwitch />*/}
              <UserNav />
              {!user && (
                <Link
                  href='#'
                  onClick={() => {
                    console.log('登录');
                    openLoginDialog();
                  }}
                  className={cn(
                    buttonVariants({
                      size: 'lg',
                      variant: 'outline',
                    }),
                    'h-full rounded-[50px] border-0 border-[#0F2C53] bg-[#0F2C53] px-5 text-base font-bold text-white transition hover:bg-[#225BA9] hover:text-white sm:px-10 sm:text-lg',
                  )}
                >
                  {t('login')}
                </Link>
              )}
            </div>
          </div>
        </div>
      </header>
    </>
  );
}