<script setup lang="ts">
const certifications = [
  { title: 'J/27 Skipper', badgeText: 'J/27', description: 'Certified to be a skipper on a J/27 class boat.' },
  { title: 'Capri 25 Skipper', badgeText: 'Capri25', description: 'Certified to be a skipper on a Capri 25 class boat.' },
  { title: 'Night', badgeText: 'Night', description: 'Certified to operate boats at night' },
  { title: 'Navigation', badgeText: 'Nav', description: 'Advanced Navigation' },
  { title: 'Crew', badgeText: 'crew', description: 'Crew certification.' },
];
</script>

<template>
  <div>Certification</div>
  <q-item
    v-for="cert in certifications"
    :key="cert.title"
    clickable
    v-ripple
    class="rounded-borders"
    :class="$q.dark.isActive ? 'bg-grey-9 text-white' : 'bg-grey-2'">
    <q-item-section avatar>
      <q-avatar rounded>
        <q-icon :name="`check`" />
      </q-avatar>
    </q-item-section>
    <q-item-section>
      <q-item-label>{{ cert.title }}</q-item-label>
      <q-item-label caption>
        <q-badge color="green-4" text-color="black">{{ cert.badgeText }}</q-badge>
      </q-item-label>
    </q-item-section>
    <q-item-section>
      <span>{{ cert.description }}</span>
    </q-item-section>
  </q-item>
</template>
