<script lang="ts">
    export let headerLeft: string = "";
    export let headerRight: string = "";
    export let headerColour: string = "text-red-500";
    export let footer: string = "";
</script>

<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="{headerColour} flex flex-row justify-between items-center mb-4">
        <p class="text-2xl md:text-3xl font-bold truncate">{headerLeft}</p>
        
        {#if headerRight}
            <p class="max-md:hidden text-xl md:text-2xl truncate">{@html headerRight}</p>
        {/if}
    </div>
    <hr class="mb-4 border-1" />
    <div class="flex-1 flex flex-col justify-center p-5">
        <slot />
    </div>
    {#if footer}
        <hr class="my-4 border-1" />
        <div class="mt-2 text-base opacity-90">
            {@html footer}
        </div>
    {/if}
</div>