<template>
  <v-table>
    <tbody>
    <tr
      v-for="item in items"
      :key="item.label"
    >
      <td>{{ item.year }}</td>
      <td>{{ item.label }}</td>
    </tr>
    </tbody>
  </v-table>
</template>

<script setup lang="ts">
  import type { Ref } from '@vue/reactivity'

  const i18n = useI18n()

  const items: Ref<Array<{ label: string, year: string }>> = ref([
    { year: '2007-2008', label: i18n.t('cursus_prepa') },
    { year: '2008-2011', label: i18n.t('cursus_engees') },
    { year: '2010', label: i18n.t('cursus_bafia') },
    { year: '2011', label: i18n.t('cursus_imfs') },
    { year: '2013', label: i18n.t('cursus_public_exam') },
    { year: '2011-2016', label: i18n.t('cursus_sag_67') },
    { year: '2013', label: i18n.t('cursus_management') },
    { year: '2014', label: i18n.t('cursus_reporting') },
    { year: '2016-2018', label: i18n.t('cursus_dsi_67') },
    { year: '2016', label: i18n.t('cursus_dotnet') },
    { year: '2016', label: i18n.t('cursus_scrum') },
    { year: '2018-2019', label: i18n.t('cursus_mn') },
    { year: '2020-2024', label: i18n.t('cursus_2ios') },
  ])


</script>

<style scoped lang="scss">
  .v-table {
    max-width: 720px;
    margin: 32px auto;

    td {
      padding: 7px 16px !important;
    }
  }
</style>