<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-[2rem] lg:h-[3rem] lg:px-5"
            >
                <span class="text-sm lg:text-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>
