<!-- Infobar component -->
<script setup lang="ts">
import Button from './Button.vue';
import IconClose from '../icons/IconClose.vue';
import { computed } from 'vue';

// Props with default values
const {
    type = 'info',
    message,
    buttonText,
} = defineProps<{
    type?: 'info' | 'warning' | 'success' | 'danger';
    message: string;
    buttonText: string;
}>();

// Get styles for type
const typeStyles = {
    info: ['bg-info-100'],
    warning: ['bg-warning-100'],
    success: ['bg-success-100'],
    danger: ['bg-danger-100'],
};

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

<template>
    <div :class="['relative text-center w-full max-w-[810px] text-[13px] leading-xs px-4 py-2', styles]">
        <!-- Message -->
        <span class="mr-2.5">
            {{ message }}
        </span>
        <Button :text="buttonText" type="secondary" size="small" />

        <!-- Close -->
        <span class="absolute top-3.5 right-3 cursor-pointer">
            <IconClose />
        </span>
    </div>
</template>

<style scoped></style>
