<script lang="ts">
    export let label: string = "";
</script>

<div id={label} class="relative flex flex-row w-full min-h-[300px] mt-5 mb-25">
    <!-- Sticky/Sliding Label -->
    <div class="hidden md:flex flex-col items-center mr-6">
        <div class="sticky top-24 left-0 z-10">
            <span class="text-2xl font-bold text-blue-400 tracking-widest"
                  style="writing-mode: vertical-rl; text-orientation: mixed;">
                {label}
            </span>
        </div>
    </div>
    <!-- Main Content -->
    <div class="flex-1 flex flex-col">
        <!-- Label for mobile -->
        <div class="md:hidden mb-2">
            <span class="text-2xl font-bold text-blue-400">{label}</span>
        </div>
        <hr class="border-blue-400 mb-6" />
        <div>
            <slot />
        </div>
    </div>
</div>