<script lang="ts" setup>
import { computed } from 'vue';
import { colorsBgLight, colorsOutline } from '@/colors';

const props = defineProps({
    on: Boolean,
    icon: {
        type: String,
        default: null,
    },
    outline: Boolean,
    color: {
        type: String,
        required: false,
        default: 'info',
    },
});
const componentClass = computed(() => (props.outline ? colorsOutline[props.color] : colorsBgLight[props.color]));
</script>

<template>
    <div >
        <transition leave-active-class="transition ease-in duration-1000" leave-from-class="opacity-100"
            leave-to-class="opacity-0" :class="componentClass"  class="px-3 py-2 last:mb-0 border rounded transition-colors duration-150 text-sm text-gray-600">
            <div v-show="on">
                <slot />
            </div>
        </transition>
    </div>
</template>