<script setup lang="ts">
const collapsed = defineModel<boolean>("collapsed", { required: true });

defineProps<{
  title: string;
  summary: string;
  bodyText: string;
  className?: string;
  panelName: string;
}>();
</script>

<template>
  <section :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',
    'collapsible-panel',
    className,
    collapsed && 'is-collapsed',
  ]" :data-panel-name="panelName">
    <div class="flex items-center justify-between gap-3">
      <h2 class="m-0 text-[0.64rem] leading-none tracking-[0.16em] text-(--viewer-accent) uppercase">
        {{ title }}
      </h2>
      <div class="flex min-w-0 items-center gap-2.5">
        <span class="panel-summary hud-mono hidden text-right text-[0.72rem] leading-none text-(--viewer-muted)">
          {{ summary }}
        </span>
        <button type="button"
          class="h-7 w-7 cursor-pointer rounded-full border border-white/10 bg-white/5 text-sm text-(--viewer-text) transition hover:bg-white/10"
          :aria-expanded="!collapsed" :aria-label="`${collapsed ? 'Expand' : 'Collapse'} ${title} panel`"
          @click="collapsed = !collapsed">
          {{ collapsed ? "+" : "-" }}
        </button>
      </div>
    </div>
    <div :class="`${panelName}-body hud-mono mt-3.5 text-[0.8rem] leading-6 text-(--viewer-muted) whitespace-pre-wrap`">
      {{ bodyText }}
    </div>
  </section>
</template>
