const { h, register, matter, MEDIUM } = globalThis.ami
const { Button } = matter

const DEFAULT_POSITION = 'absolute'

function TopbarButton ({ label, href, icon, position }) {
  return h('div', {
    className: `top-2 ${position ?? DEFAULT_POSITION} z-10`,
    style: 'inset-inline-end: max(8px, calc((100vw - var(--page-width)) / 2))',
    children: h(Button, {
      _size: 'xs',
      _style: id => `
        @media screen and (max-width: ${MEDIUM - 1}px) {
          ${id} > *:first-child { display: none }
        }
      `,
      _model: { name: label, value: href, icon },
    }),
  })
}

register(TopbarButton, 'topbar-button')
