---
import { css } from '@styled-system/css'
import SrJuggernautLogo from '@/components/SrJuggernautLogo.astro'
import { srOnlyClass } from '@/styles/srOnly'

const headerClass = css({
  backgroundColor: 'neutral.2',
  color: 'neutral.12'
})

const headerContainerClass = css({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  margin: '0 auto',
  padding: 'md',
  width: {
    base: '100%',
    sm: 'breakpoint-sm',
    md: 'breakpoint-md',
    lg: 'breakpoint-lg',
    xl: 'breakpoint-xl',
    '2xl': 'breakpoint-2xl'
  }
})

const headerLogoClass = css({
  fill: 'neutral.12',
  width: '32px',
  height: 'auto'
})

const headerMenuClass = css({
  display: 'flex',
  alignItems: 'center',
  gap: 'md'
})

const headerMenuLinkClass = css({
  display: 'inline-flex',
  alignItems: 'center',
  gap: 'sm',
  paddingInline: 'md',
  paddingBlock: 'sm',
  borderRadius: 'sm',
  textDecoration: 'none',
  _hover: {
    backgroundColor: 'primary.3'
  }
})
---

<header class={headerClass}>
  <div class={headerContainerClass}>
    <div>
      <a href="/">
        <SrJuggernautLogo className={headerLogoClass} />
        <span class={srOnlyClass}>Ir al inicio</span>
      </a>
    </div>
    <nav>
      <menu class={headerMenuClass}>
        <li>
          <a
            class={headerMenuLinkClass}
            href="https://blog.juggernautplays.com"
          >
            Blog
          </a>
        </li>
      </menu>
    </nav>
  </div>
</header>