<script setup lang="ts">
import MENU_IMAGE from "/assets/images/settings/top-screen/options/options.webp";
import GBA_MODE_IMAGE from "/assets/images/settings/top-screen/options/gba-mode.webp";
import LANGUAGE_IMAGE from "/assets/images/settings/top-screen/options/language.webp";
import START_UP_IMAGE from "/assets/images/settings/top-screen/options/start-up.webp";

const props = defineProps<{
  x: number;
  y: number;
  isOpen: boolean;
}>();

const [menuImage, gbaModeImage, languageImage, startUpImage] = useImages(
  MENU_IMAGE,
  GBA_MODE_IMAGE,
  LANGUAGE_IMAGE,
  START_UP_IMAGE,
);

useRender((ctx) => {
  ctx.translate(props.x, props.y);

  ctx.drawImage(menuImage!, 0, 0);

  if (props.isOpen) {
    ctx.drawImage(languageImage!, 0, -48);
    ctx.drawImage(gbaModeImage!, 48, -48);
    ctx.drawImage(startUpImage!, 0, -96);
  }
});

defineOptions({
  render: () => null,
});
</script>
