---
import logo from '@/assets/logo.png';
import { Image } from 'astro:assets';
import LinkButton from '@/components/link-button';
import { ChevronUp, Compass } from 'lucide-react';
import type { lang } from '@/i18n/utils';

type Props = {
  lang: lang;
};

const locales = {
  en: {
    to: '/es',
    switch_language: '🇲🇽',
    top: 'Top',
    navigation: 'Navigation',
  },
  es: {
    to: '/',
    switch_language: '🇺🇸',
    top: 'Arriba',
    navigation: 'Navevación',
  },
};

const { lang } = Astro.props;
---

<header
  class='py-2 px-2 lg:px-0 fixed top-0 z-50 flex w-full items-center justify-between border-b border-secondary backdrop-blur-lg'
>
  <div class='w-full max-w-[800px] mx-auto flex items-center justify-between'>
    <section class='flex max-w-max'>
      <LinkButton
        href={lang === 'en' ? '/' : '/es'}
        size='icon'
        variant='link'
        className='rounded-full px-0'
      >
        <Image
          src={logo}
          width={80}
          height={80}
          loading='eager'
          decoding='sync'
          fetchpriority='high'
          class='w-auto h-auto aspect-square'
          alt='juancmandev logo'
        />
      </LinkButton>
    </section>
    <section class='flex items-center gap-4'>
      <LinkButton
        variant='link'
        href={locales[lang].to}
        className='p-0 gap-1 text-base'
      >
        {locales[lang].switch_language}
      </LinkButton>
      <LinkButton
        variant='link'
        className='p-0 gap-0.5'
        href='#'
      >
        <ChevronUp className='w-5' />
        {locales[lang].top}
      </LinkButton>
      <LinkButton
        variant='link'
        className='p-0 gap-0.5'
        href='#navigation'
      >
        <Compass className='w-5' />
        {locales[lang].navigation}
      </LinkButton>
    </section>
  </div>
</header>