<script setup lang="ts">
import { ref, watch } from 'vue'

type FeatureSection = {
  label: string
  title: string
  description: string
  bullets: string[]
  image: string
  imageAlt: string
}

const props = defineProps<{
  heading: string
  summary: string
  sections: FeatureSection[]
}>()

const activeIndex = ref(0)

watch(
  () => props.sections.length,
  () => {
    activeIndex.value = 0
  }
)
</script>

<template>
  <section class="feature-highlight-section fun-fact-section">
    <div class="container">
      <div class="feature-highlight-heading">
        <h1>{{ heading }}</h1>
        <p>{{ summary }}</p>
      </div>

      <ul class="feature-highlight-tabs" role="tablist">
        <li v-for="(section, index) in sections" :key="section.label" role="presentation">
          <button
            type="button"
            :class="['feature-highlight-tab', { active: activeIndex === index }]"
            role="tab"
            :aria-selected="activeIndex === index"
            :aria-controls="`feature-panel-${index + 1}`"
            @click="activeIndex = index"
          >
            {{ section.label }}
          </button>
        </li>
      </ul>

      <div class="feature-highlight-panels">
        <div
          v-for="(section, index) in sections"
          :id="`feature-panel-${index + 1}`"
          :key="section.label"
          :class="['feature-highlight-panel', { active: activeIndex === index }]"
          role="tabpanel"
        >
          <div class="feature-highlight-detail">
            <div class="feature-highlight-copy">
              <h2>{{ section.title }}</h2>
              <p>{{ section.description }}</p>
              <ul class="feature-highlight-points">
                <li v-for="bullet in section.bullets" :key="bullet">{{ bullet }}</li>
              </ul>
            </div>
            <div class="feature-highlight-visual">
              <div class="feature-highlight-visual-card">
                <img :src="section.image" :alt="section.imageAlt">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
