<script setup lang="ts">
const props = defineProps<{
  x: number;
  y: number;
  opacity: number;
}>();

const buttonImage = useTemplateRef("buttonImage");

useRender((ctx) => {
  if (!buttonImage.value) return;

  ctx.globalAlpha = props.opacity / 100;
  ctx.drawImage(buttonImage.value, props.x, props.y);
});
</script>

<template>
  <img
    ref="buttonImage"
    src="/assets/images/home/bottom-screen/buttons/pictochat.png"
    hidden
  />
</template>
