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

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

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

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

let cardIcon = warningIcon
let color = 'rgb(255 246 147 / 60%)'

switch (props.icon) {
  case 'error':
    cardIcon = errorIcon
    color = 'rgb(255 113 113 / 60%)'
    break

  case 'info':
    cardIcon = infoIcon
    color = 'rgb(94 162 255 / 60%)'

    break

  case 'help':
    cardIcon = helpIcon
    color = 'rgb(178 104 255 / 60%)'

    break

  case 'checkmark':
    cardIcon = checkIcon
    color = 'rgb(69 255 255 / 60%)'

    break

  case 'idea':
    cardIcon = ideaIcon
    color = 'rgb(255 255 255 / 60%)'

    break

  case 'warning':
  default:
    break
}
</script>

<template>
  <div class="tilt flex flex-row items-center gap-2 mb-0 sm:mb-2 md:mb-4">
    <img
      draggable="false"
      :src="cardIcon"
      :alt="`Download`"
      class="icon-image"
    />
    <h3 class="whitespace-nowrap mb-0">{{ props.title }}</h3>
  </div>
  <div class="box p-4 rounded-xl mb-4">
    <slot />
  </div>
</template>

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

.box {
  > p {
    margin-bottom: 0;
  }

  margin-bottom: 1rem;
  border-bottom: 1px ridge;
  border-right: 1px ridge;
  border-color: v-bind(color);
}

.icon {
  &-image {
    width: 48px;
    height: 48px;
  }
}
</style>
