<template>
  <q-card flat class="dashboard-chart-card card-ring">
    <div class="flex justify-between items-center no-wrap q-mb-sm">
      <span class="text-subtitle2 text-weight-regular">Aniversariantes do Mês</span>
      <q-icon name="mdi-cake-variant-outline" color="secondary" size="sm" />
    </div>

    <div class="text-caption text-grey-6 q-mb-xs flex items-center" style="gap: 4px">
      <q-icon name="mdi-calendar-outline" size="14px" color="secondary" />
      <span>Nome</span>
    </div>
    <q-separator />

    <div class="list-scroll">
      <div v-if="people.length === 0" class="text-caption text-grey-5 text-center q-mt-md">
        Nenhum aniversariante neste mês.
      </div>
      <q-list v-else dense>
        <template v-for="(person, index) in people" :key="index">
          <q-item class="q-px-none person-item">
            <q-item-section>
              <q-item-label class="text-body2">{{ person.name }}</q-item-label>
            </q-item-section>
            <q-item-section side>
              <q-item-label class="text-body2 text-weight-medium text-grey-7">
                Dia {{ person.day }}
              </q-item-label>
            </q-item-section>
          </q-item>
          <q-separator v-if="index < people.length - 1" />
        </template>
      </q-list>
    </div>
  </q-card>
</template>

<script setup>
defineProps({
  people: {
    type: Array,
    default: () => [],
  },
});
</script>

<style scoped>
.dashboard-chart-card {
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
}

.list-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.person-item {
  padding-top: 6px;
  padding-bottom: 6px;
}
</style>
