<script setup lang="ts">
// types

type Props = {
    title: string;
    borderLess?: boolean;
};

// props

withDefaults(defineProps<Props>(), {
    borderLess: false,
});
</script>

<template>
    <div class="flex flex-col w-full gap-5">
        <div
            class="flex flex-col items-start"
            :class="{
                'border-b border-slate-200 pb-5': borderLess,
            }"
        >
            <div class="w-full flex items-center justify-between h-[3rem] px-5">
                <span class="typo-sub-h-lg">{{ title }}</span>
                <slot name="button" />
            </div>
        </div>
        <div
            class="w-full flex flex-col border rounded-xl"
            :class="{
                'border-none': borderLess,
                'border-slate-200': !borderLess,
            }"
        >
            <div class="w-full p-5">
                <slot />
            </div>
        </div>
    </div>
</template>

<style scoped></style>
