import { cookies } from 'next/headers'
import Link from 'next/link'
import Image from 'next/image'

import { getI18n } from '@/i18n/i18n.server'

import { Locales } from './Locales'
import { SwitchTheme } from './SwitchTheme'

export const Header = (): JSX.Element => {
  const cookiesStore = cookies()
  const i18n = getI18n()

  return (
    <header className='sticky top-0 z-50 flex w-full justify-between border-b-2 border-gray-600 bg-white px-6 py-2 dark:border-gray-400 dark:bg-black'>
      <Link href='/'>
        <div className='flex items-center justify-center'>
          <Image
            quality={100}
            width={60}
            height={60}
            src='/images/icon_small.png'
            alt='Théo LUDWIG'
            priority
          />
          <strong className='ml-1 hidden font-headline font-semibold text-yellow dark:text-yellow-dark xs:block'>
            Théo LUDWIG
          </strong>
        </div>
      </Link>
      <div className='flex justify-between'>
        <div className='flex flex-col items-center justify-center px-6'>
          <Link
            href='/blog'
            data-cy='header-blog-link'
            className='text-yellow hover:underline dark:text-yellow-dark'
          >
            Blog
          </Link>
        </div>
        <Locales
          currentLocale={i18n.locale}
          cookiesStore={cookiesStore.toString()}
        />
        <SwitchTheme cookiesStore={cookiesStore.toString()} />
      </div>
    </header>
  )
}