<script setup lang="ts">
defineProps<{
  title: string;
  subtitle: string;
  bodyHtml: string;
  hidden?: boolean;
  className?: string;
  subtitleClass?: string;
  bodyClass?: string;
}>();
</script>

<template>
  <aside v-if="!hidden" :class="[
    'pointer-events-auto rounded-3xl border border-(--viewer-panel-border) bg-(--viewer-panel) p-4 text-(--viewer-text) shadow-[0_18px_54px_rgba(0,0,0,0.35)] backdrop-blur-xl',
    'info-panel',
    className,
  ]">
    <h2 class="m-0 text-[0.72rem] tracking-[0.16em] text-(--viewer-accent) uppercase">
      {{ title }}
    </h2>
    <h3 :class="subtitleClass">{{ subtitle }}</h3>
    <div :class="bodyClass" v-html="bodyHtml" />
  </aside>
</template>
