<script setup lang="ts">
const props = defineProps<{
  okLabel: "Copy" | "Open";
}>();

const store = useContactStore();

const { assets } = useAssets();

useRender((ctx) => {
  ctx.globalAlpha = store.isIntro
    ? store.intro.stage3Opacity
    : store.outro.stage2Opacity;

  // top bar
  ctx.drawImage(
    assets.contact.bottomScreen.topBar,
    0,
    store.isIntro ? store.intro.topBarY : 0,
  );

  // bottom bar
  ctx.translate(0, store.isIntro ? store.intro.bottomBarY : SCREEN_HEIGHT - 24);
  ctx.drawImage(assets.contact.bottomScreen.bottomBar, 0, 0);

  ctx.drawImage(assets.contact.bottomScreen.okButton, 144, 4);
  ctx.font = "10px NDS10";
  ctx.fillStyle = "#000000";
  ctx.fillText(props.okLabel, 144 + 35, 4 + 13);
});

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