<script setup lang="ts">
import { ClassroomComplianceAPIClient, type Entry, type Student } from '@/api/classroom_compliance';
import { useAuthStore } from '@/stores/auth';
import { onMounted, ref, type Ref } from 'vue';
import StudentEntryItem from './StudentEntryItem.vue';


const props = defineProps<{
  student: Student
}>()
const authStore = useAuthStore()

const entries: Ref<Entry[]> = ref([])

const apiClient = new ClassroomComplianceAPIClient(authStore)

onMounted(() => {
  apiClient.getStudentEntries(props.student.classId, props.student.id).handleErrorsWithAlert()
    .then(result => {
      if (result !== null) {
        entries.value = result
      }
    })
})
</script>
<template>
  <div>
    <h3 class="align-center">Entries</h3>
    <div>
      <StudentEntryItem v-for="entry in entries" :key="entry.id" :entry="entry" />
    </div>
  </div>
</template>
