<script lang="ts">
    // Allows additional styling to be applied to the Card component's outer wrapping
    export let containerStyle: string = "";
</script>

<div class={containerStyle}>
    <div class="bg-slate-100/10 dark:bg-slate-100/10 rounded-2xl shadow-2xl p-6 flex flex-col h-full w-full">
        <div class="text-red-400 font-bold flex flex-row justify-between items-center mb-4">
            <slot name="headerLeft" class="text-2xl md:text-3xl truncate"></slot>
            <slot name="headerRight" class="max-md:hidden text-xl md:text-2xl truncate"></slot>
        </div>
        <hr class="mb-4 border-1" />
        <div class="flex-1 flex flex-col justify-center p-5">
            <slot name="content"/>
        </div>
        
        <hr class="my-4 border-1" />
        <div class="flex flex-row justify-between items-center mt-2 text-base opacity-90">
            <slot name="footerLeft"/>
            <slot name="footerRight"/>
        </div>
    </div>
</div>
