<script setup lang="ts">
import type { PropType } from 'vue'

import warningIcon from 'assets/images/icons/accent/warning.avif'
import errorIcon from 'assets/images/icons/accent/error.avif'
import infoIcon from 'assets/images/icons/accent/info.avif'
import helpIcon from 'assets/images/icons/accent/help.avif'
import checkIcon from 'assets/images/icons/accent/checkmark.avif'
import ideaIcon from 'assets/images/icons/accent/idea.avif'

type IconOptions = 'warning' | 'error' | 'info' | 'help' | 'checkmark' | 'idea'

const props = defineProps({
  type: {
    type: String as PropType<IconOptions>,
    default: 'warning',
  },
  title: {
    type: String,
    default: 'Important',
  },
})

const cards = {
  warning: {
    color: 'border-warning',
    icon: {
      src: warningIcon,
      alt: 'Warning triangle',
    },
  },
  error: {
    color: 'border-error',
    icon: {
      src: errorIcon,
      alt: 'Error circle',
    },
  },
  info: {
    color: 'border-info',
    icon: {
      src: infoIcon,
      alt: 'Information circle',
    },
  },
  help: {
    color: 'border-help',
    icon: {
      src: helpIcon,
      alt: 'Help circle',
    },
  },
  checkmark: {
    color: 'border-checkmark',
    icon: {
      src: checkIcon,
      alt: 'Checkmark',
    },
  },
  idea: {
    color: 'border-idea',
    icon: {
      src: ideaIcon,
      alt: 'Lightbulb',
    },
  },
}
</script>

<template>
  <div class="tilt flex flex-row items-center gap-2 mb-0 sm:mb-2 md:mb-4">
    <img
      draggable="false"
      :src="cards[props.type].icon.src"
      :alt="cards[props.type].icon.alt"
      class="w-12 h-12"
    />
    <h3 class="whitespace-nowrap mb-0">{{ props.title }}</h3>
  </div>
  <div
    :class="`box p-4 mb-4 ${cards[props.type].color} border-b border-r rounded-xl`"
  >
    <slot />
  </div>
</template>

<style lang="scss">
.tilt {
  transform: rotate(-2deg);
}
</style>
