<script setup lang="ts">
import type { MarketingCalendarLegendDto } from '#/api/marketing';

import { IconifyIcon } from '@vben/icons';

defineProps<{
  legends: MarketingCalendarLegendDto[];
  monthTitle: string;
}>();

const emit = defineEmits<{
  (event: 'nextMonth'): void;
  (event: 'prevMonth'): void;
}>();
</script>

<template>
  <div class="mc-header">
    <div class="mc-month-nav">
      <button type="button" @click="emit('prevMonth')">
        <IconifyIcon icon="lucide:chevron-left" />
      </button>
      <div class="mc-month-title">{{ monthTitle }}</div>
      <button type="button" @click="emit('nextMonth')">
        <IconifyIcon icon="lucide:chevron-right" />
      </button>
    </div>

    <div class="mc-legend">
      <span v-for="item in legends" :key="item.type" class="mc-legend-item">
        <span class="mc-legend-dot" :style="{ background: item.color }"></span>
        {{ item.label }}
      </span>
    </div>
  </div>
</template>
