<template>
    <section
        :class="[padding ? padding : null]"
        class="relative w-full max-w-full bg-white rounded-2xl"
    >
        <template v-if="title">
            <div class="flex w-full items-center justify-between mb-2.5">
                <div class="flex flex-col gap-1.5">
                    <h3 v-if="subtext" class="text-xs text-gray-200">
                        {{ $t(subtext) }}
                    </h3>
                    <h4 v-if="title" :class="titleStyle">
                        {{ $t(title) }}
                    </h4>
                </div>

                <div class="flex items-center gap-2.5">
                    <slot name="actions"></slot>
                </div>
            </div>
            <hr class="mb-5" />
        </template>
        <slot></slot>
    </section>
</template>

<script>
export default {
    props: {
        padding: {
            type: String,
            default: "p-5",
        },
        title: String,
        subtext: String,
        titleStyle: {
            type: String,
            default: "text-lg font-medium text-blue-300",
        },
    },
};
</script>
