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

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

defineProps<{
  banner: MarketingCalendarConflictBannerDto | null;
}>();

const emit = defineEmits<{
  (event: 'openConflict', conflictId: string): void;
}>();
</script>

<template>
  <button
    v-if="banner"
    type="button"
    class="mc-conflict-banner"
    @click="emit('openConflict', banner.conflictId)"
  >
    <span class="mc-conflict-banner-icon">
      <IconifyIcon icon="lucide:alert-triangle" />
    </span>
    <span class="mc-conflict-banner-text">
      {{ banner.startDay }}日~{{ banner.endDay }}日 有
      <b>{{ banner.activityCount }}个活动</b>
      同时进行，请注意优惠叠加可能影响利润
    </span>
  </button>
</template>
