<script setup lang="ts">
import _teachers from '~/assets/jsons/teachers.json'
import type { Teacher } from '~/common/interfaces/Teacher'

const teachers = _teachers as Teachers

interface Teachers {
  [key: string]: Teacher[]
}
</script>

<template>
  <article>
    <h1>在19预科2班任教的老师</h1>

    <v-list lines="three">
      <v-list-item v-for="item in Object.keys(_teachers)" :key="item" :title="item">
        <v-expansion-panels multiple>
          <v-expansion-panel v-for="teacher in teachers[item]" :key="teacher.name" :title="teacher.name">
            <v-expansion-panel-text>
              <div class="flex flex-col sm:flex-row sm:items-start items-center">
                <p class="w-100%" v-html="teacher.description" />
                <v-img class="m-3 w-200px" :src="teacher.image" />
              </div>
            </v-expansion-panel-text>
          </v-expansion-panel>
        </v-expansion-panels>
      </v-list-item>
    </v-list>
  </article>
</template>
