<script setup lang="ts">
interface Props {
  color?: 'info' | 'success' | 'warning' | 'error'
  density?: 'regular' | 'compact'
}
const props = withDefaults(defineProps<Props>(), {
  color: 'info',
  density: 'regular'
})

const styleClass = computed(() => {
  const colorVariants = {
    'info': 'dui-alert-info',
    'success': 'dui-alert-success',
    'warning': 'dui-alert-warning',
    'error': 'dui-alert-error'
  }
  const densityVariants = {
    'regular': 'py-4 px-4',
    'compact': 'py-2 px-4'
  }
  const colorClass = colorVariants[props.color]
  const densityClass = densityVariants[props.density]
  return [colorClass, densityClass]
})
</script>
<template>
  <div class="dui-alert shadow-lg items-start" :class="styleClass">
    <div class="flex items-center w-full"><slot></slot></div>
  </div>
</template>
