<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    yOffset?: number;
    opacity?: number;
    title?: string | undefined;
  }>(),
  {
    yOffset: 0,
    opacity: 1,
    title: undefined,
  },
);

const { onRender } = useScreen();
const { assets } = useAssets();

const TITLE_Y = 5;

onRender((ctx) => {
  ctx.globalAlpha = props.opacity;

  // top bar
  assets.images.common.barsSheet.draw(ctx, 0, -props.yOffset, {
    colored: true,
  });

  if (props.title) {
    ctx.fillStyle = "#000000";
    ctx.font = "10px NDS10";
    fillTextCentered(ctx, props.title, 0, TITLE_Y - props.yOffset, 256);
  }

  ctx.scale(1, -1);

  // bottom bar
  assets.images.common.barsSheet.draw(ctx, 0, -192 - props.yOffset, {
    colored: true,
  });
}, 50);

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