<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 de {{ currentMonth }}</span>
      <q-icon name="mdi-cake-variant-outline" color="secondary" size="sm" />
    </div>

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

    <q-list dense>
      <template v-for="(person, index) in people" :key="index">
        <q-item class="q-px-none person-item">
          <q-item-section avatar style="min-width: 36px">
            <div class="day-badge">{{ person.day }}</div>
          </q-item-section>
          <q-item-section>
            <q-item-label class="text-body2">{{ person.name }}</q-item-label>
          </q-item-section>
        </q-item>
        <q-separator v-if="index < people.length - 1" />
      </template>
    </q-list>
  </q-card>
</template>

<script setup>
const MONTHS_PT = [
  'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
  'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro',
];

const currentMonth = MONTHS_PT[new Date().getMonth()];

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

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

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.person-item {
  padding-top: 6px;
  padding-bottom: 6px;
}

.day-badge {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #f97316;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
</style>
