<script setup>
const props = defineProps({
  variant: {
    type: String,
    default: 'default'
  },
  background: {
    type: String,
    default: 'pink'
  }
})

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

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

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

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

  if (props.background === 'red') {
    return 'prose-blockquote--red'
  }

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

  return 'prose-blockquote--pink'
})
</script>

<template>
  <blockquote
    class="prose-blockquote mb-2.5 text-[15px] leading-8"
    :class="variant === 'alt'
      ? 'rounded-[14px] border border-[var(--site-line)] bg-[var(--site-panel)] px-6 py-5 italic text-[var(--site-text)]'
      : ['rounded-[10px] border-l-2 px-5 py-4 font-medium text-[#15171a]', backgroundClass]"
  >
    <span class="whitespace-pre-line">
      <slot />
    </span>
  </blockquote>
</template>

<style scoped>
.prose-blockquote--gray {
  border-color: rgba(100, 116, 139, 0.72);
  background: rgba(100, 116, 139, 0.12);
}

.prose-blockquote--blue {
  border-color: rgba(59, 130, 246, 0.78);
  background: rgba(59, 130, 246, 0.14);
}

.prose-blockquote--green {
  border-color: rgba(34, 197, 94, 0.78);
  background: rgba(34, 197, 94, 0.14);
}

.prose-blockquote--yellow {
  border-color: rgba(245, 158, 11, 0.82);
  background: rgba(245, 158, 11, 0.16);
}

.prose-blockquote--red {
  border-color: rgba(239, 68, 68, 0.78);
  background: rgba(239, 68, 68, 0.14);
}

.prose-blockquote--purple {
  border-color: rgba(168, 85, 247, 0.78);
  background: rgba(168, 85, 247, 0.14);
}

.prose-blockquote--pink {
  border-color: #ff1a75;
  background: color-mix(in srgb, #ff1a75 10%, #ffffff);
}
</style>
