<script setup lang="ts">
import { computed } from 'vue';
import IconInfoCircle from '../icons/IconInfoCircle.vue';
import IconWarningCircle from '../icons/IconWarningCircle.vue';
import IconSuccessCircle from '../icons/IconSuccessCircle.vue';
import IconDangerCircle from '../icons/IconDangerCircle.vue';
import Button from './Button.vue';

// Props with default values
const {
    message,
    type = 'info',
    showIcon = true,
    size = 'normal',
    link,
} = defineProps<{
    message: string;
    type?: string;
    showIcon?: boolean;
    size?: string;
    link?: {
        label: string;
        url: string;
    };
}>();

// Get styles for type
const typeStyles = {
    info: ['bg-info-50', 'text-info-900', 'border-info-100'],
    warning: ['bg-warning-50', 'text-warning-900', 'border-warning-100'],
    success: ['bg-success-50', 'text-success-500', 'border-success-100'],
    danger: ['bg-danger-50', 'text-danger-500', 'border-danger-100'],
    neutral: ['bg-neutral-50', 'text-base-500', 'border-neutral-100'],
};

const styles = computed(() => typeStyles[type].join(' '));

// Map to eagerly loaded components
const iconMap = {
    info: IconInfoCircle,
    warning: IconWarningCircle,
    success: IconSuccessCircle,
    danger: IconDangerCircle,
};

const iconComponent = computed(() => iconMap[type]);
</script>

<template>
    <div
        :class="[
            'inline-flex items-center border',
            showIcon && 'gap-2',
            size === 'normal' && 'px-2.5 py-0.5 text-xs leading-xs rounded',
            size === 'large' && 'px-4 py-2 text-base leading-base rounded-lg',
            message === '' && 'hidden',
            styles,
        ]"
    >
        <!-- Icon -->
        <span v-if="showIcon">
            <component :is="iconComponent" />
        </span>

        <!-- Message -->
        <span :class="[size === 'large' && 'flex-1 text-left']">
            {{ message }}
        </span>

        <!-- Link -->
        <Button v-if="link" :href="link.url" :text="link.label" type="secondary" size="small" />
    </div>
</template>

<style scoped></style>
