<script setup lang="ts">
const props = defineProps<{
  selected: boolean;
}>();

const buttonImage = useTemplateRef("buttonImage");
const selectorImage = useTemplateRef("selectorImage");

const x = 32;
const y = 72;

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

  ctx.drawImage(buttonImage.value, x, y);

  if (props.selected) {
    ctx.drawImage(selectorImage.value, x - 1, y - 1);
  }
});
</script>

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