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

export function FloatingButton ({ label, href, icon, onClick }) {
  return h('div', {
    dir: document.documentElement.dir,
    _style: id => `
      ${id} button, ${id} a { display: flex }
      ${id}:dir(ltr) { transform: rotate(270deg) translateX(100%); transform-origin: bottom right }
      ${id}:dir(rtl) { transform: rotate(90deg) translateX(-100%); transform-origin: bottom left }
    `,
    className: 'fixed -end-1 bottom-24 animate-fade shadow rounded-lg print:hidden',
    children: h(Button, { _size: 'xs', _model: { name: label, value: href, icon }, onClick })
  })
}

register(FloatingButton, 'floating-button')
