<template>
  <tbody>
    <tr class="c-accordion__item js-accordion-expand">
      <td v-for="(title, index) in titles" :key="index" v-html="title">
      </td>
      <td>
        <button type="button" class="c-accordion__trigger" :id="`header-${ariaId}`" aria-expanded="false"
          :aria-controls="`panel-${ariaId}`"></button>
      </td>
    </tr>
    <tr class="c-accordion__panel" :id="`panel-${ariaId}`" :aria-labelledby="`header-${ariaId}`">
      <td v-for="(content, index) in contents" :key="index">
        <div class="c-accordion__panel-content" v-html="content">
        </div>
      </td>
      <td></td>
    </tr>
  </tbody>
</template>

<script setup lang="ts">
import { useId } from 'vue';
const ariaId = useId();
defineProps<{
  titles: string[];
  contents: string[];
}>();
</script>
