<script setup>
const props = defineProps({
  emojiEnabled: {
    type: Boolean,
    default: true
  },
  emoji: {
    type: String,
    default: '💡'
  },
  title: {
    type: String,
    default: ''
  },
  background: {
    type: String,
    default: 'blue'
  }
})

const backgroundClass = computed(() => {
  if (props.background === 'gray') {
    return 'prose-callout--gray'
  }

  if (props.background === 'green') {
    return 'prose-callout--green'
  }

  if (props.background === 'yellow') {
    return 'prose-callout--yellow'
  }

  if (props.background === 'blue') {
    return 'prose-callout--blue'
  }

  if (props.background === 'purple') {
    return 'prose-callout--purple'
  }

  return 'prose-callout--red'
})
</script>

<template>
  <aside
    class="prose-callout prose-callout-card mb-2.5 rounded-[10px] p-5 text-[15px] leading-8 text-[var(--site-text)]"
    :class="backgroundClass"
  >
    <div v-if="emojiEnabled || title" class="prose-callout-card__header mb-4 flex items-start gap-2">
      <span v-if="emojiEnabled" class="prose-callout-card__emoji inline-flex shrink-0 pt-0.5 text-[20px] leading-none">{{ emoji || '💡' }}</span>
      <strong v-if="title" class="prose-callout-card__title min-w-0 text-[18px] leading-[1.35] font-bold text-[#050505]">
        {{ title }}
      </strong>
    </div>
    <div class="prose-callout-card__body min-w-0 whitespace-pre-line">
      <slot />
    </div>
  </aside>
</template>

<style scoped>
.prose-callout--gray {
  background: color-mix(in srgb, #050505 10%, #ffffff);
}

.prose-callout--blue {
  background: color-mix(in srgb, #0055ff 10%, #ffffff);
}

.prose-callout--green {
  background: color-mix(in srgb, #16ae68 10%, #ffffff);
}

.prose-callout--yellow {
  background: color-mix(in srgb, #ffff00 10%, #ffffff);
}

.prose-callout--red {
  background: color-mix(in srgb, #ff0000 10%, #ffffff);
}

.prose-callout--purple {
  background: color-mix(in srgb, #8800ff 10%, #ffffff);
}
</style>
