<template>
  <div
    class="inline-flex w-full rounded-md"
    :class="twMerge(colorOptions.description[color])"
  >
    <div
      class="flex items-center justify-center rounded-l-md"
      :class="twMerge([colorOptions.icon[color], sizeOptions[size]])"
    >
      <slot name="icon">
        <a-icon-info-circle v-if="iconType == 'circle'" :class="`w-[${iconSize}] h-[${iconSize}]`" />
        <a-icon-warning-triangle v-if="iconType == 'triangle'" :class="`w-[${iconSize}] h-[${iconSize}]`" />
      </slot>
    </div>
    <div
      :class="sizeOptions[size]"
      class="rounded-r-md flex items-center"
    >
      <slot name="default" />
    </div>
  </div>
</template>

<script setup lang="ts">
import {twMerge} from "tailwind-merge";

defineOptions({ name: 'AAlert' })

interface Props {
  size?: 'lg' | 'sm' | 'xs'
  color?: 'blue' | 'green' | 'red' | 'deepblue' | 'orange'
  iconType?:'triangle' |'circle'
  iconSize?: string
}
withDefaults(defineProps<Props>(), {
  size: 'sm',
  color: 'blue',
  iconType:'circle',
  iconSize: '16px',
})
const sizeOptions = {
  lg: 'text-base p-2',
  sm: 'text-sm px-2 py-[3.5px]',
  xs: 'text-xs px-2 py-[3.5px]'
}

const colorOptions = {
  icon: {
    blue: 'bg-blue-700 text-white dark:bg-blue-500 dark:text-gray-900',
    green: 'bg-green-500 text-white dark:text-gray-900',
    orange: 'bg-[#FCA204] text-white dark:text-gray-900',
    deepblue: 'bg-deepblue-900 text-white dark:text-gray-900',
    red: 'bg-red-500 text-white dark:bg-red-400 dark:text-gray-900'
  },
  description: {
    blue: 'bg-blue-100 dark:bg-gray-200/10 text-blue-700 dark:text-blue-500',
    green: 'bg-green-100 text-green-500',
    orange: 'bg-[#FFF5E6] dark:bg-[#FCA2041A] text-[#FCA204]',
    deepblue: 'bg-deepblue-100 text-deepblue-900',
    red: 'bg-red-100 text-red-500 dark:bg-[#3A3133] dark:text-red-400'
  }
}
</script>

<style scoped></style>
