'use client';

import { UserCircle } from 'lucide-react';
import Link from 'next/link';

import { Logo } from '@/shared/assets/logo';
import { useLanguage } from '@/shared/language';
import { LanguageSwitcher } from '@/shared/language/ui/language-switcher';
import { Button } from '@/shared/shadcn-ui/button';

import { DesktopNav } from './desktop-nav';
import { MobileNav } from './mobile-nav';

export function Header() {
  const { t } = useLanguage();

  return (
    <header className='sticky top-0 z-40 w-full border-b bg-white'>
      <div className='container mx-auto flex h-16 items-center justify-between p-4'>
        <Logo />
        <DesktopNav />
        <div className='flex items-center gap-6 lg:contents'>
          <MobileNav />
          <div className='flex items-center gap-6'>
            <LanguageSwitcher />
            <Link href={'/login'}>
              <Button className='flex items-center gap-2'>
                <UserCircle className='size-4' />
                {t('common.buttons.login')}
              </Button>
            </Link>
          </div>
        </div>
      </div>
    </header>
  );
}