<template>
    <div class="row">
        <div class="col">
            <div class="alert alert-info padding-15" role="alert" v-show="!isLoading">
                <div class="row">
                    <div class="col">
                        <h5 class="pull-left">{{item.title}}</h5>
                    </div>
                    <div class="col-auto">
                        <i class="fa fa-times text-info-darker pointer" data-dismiss="alert"></i>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <p v-html="item.description"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useComponentHandler } from '@/composables/useComponentHandler';
import { useFormHandler } from '@/composables/useFormHandler';

const props = defineProps<{
    section: string;
    data: any;
}>();

const { item } = useComponentHandler(props);
const { isLoading } = useFormHandler(props);
</script>
