'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 { UserNav } from '../user-nav';
import ImageLogo from './image.png';

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

  const { user } = useGlobalStore();
  const Logo = (
    <Link href='/' className='flex items-center gap-2 text-lg font-bold'>
      <Image src={ImageLogo} width={172} height={49} alt='logo' unoptimized />
    </Link>
  );
  return (
    <header className='fixed top-10 z-50 w-full'>
      <div className='container flex h-[73px] items-center justify-between rounded-[50px] bg-white pl-7 pr-1'>
        <nav className='flex-col gap-6 text-lg 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='/auth'
              className={cn(
                buttonVariants({
                  size: 'lg',
                  variant: 'outline',
                }),
                'h-full rounded-[50px] border-2 border-[#0F2C53] bg-[#0F2C53] px-14 text-2xl font-bold text-white transition hover:bg-white hover:text-[#0F2C53]',
              )}
            >
              {t('login')}
            </Link>
          )}
        </div>
      </div>
    </header>
  );
}