<script lang="ts">
    let { contentSnippet, headerSnippet }: { contentSnippet: () => any; headerSnippet?: () => any } = $props()
</script>

<div class="card-wrapper">
    <div class="header">
        {#if headerSnippet}
            {@render headerSnippet()}
        {/if}
        <span class="bar"></span>
        <span class="crinkle">
            <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48"
                height="48"
                viewBox="0 0 48 48"
            >
                <path
                    d="M1.32395 0.999996L50 49"
                    stroke={"white"}
                ></path>
            </svg>
        </span>
    </div>
    <div class="body">
        {@render contentSnippet()}
    </div>
</div>

<style lang="less">
    .card-wrapper {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;

        .header {
            display: flex;
            height: 2.4rem;
            position: relative;

            .bar {
                flex-grow: 1;
                height: 100%;
                border-radius: 4px 0px;
                border-top: 1px solid white;
                border-left: 1px solid white;
            }
            .crinkle {
                width: 2.4rem;
                height: 2.4rem;
                overflow: hidden;
                margin-left: -2px;
            }
        }
        .body {
            width: 100%;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            gap: 1.2rem;
            border: 1px solid white;
            border-top: 0px solid white;
            border-radius: 0px 0px 4px 4px;
        }
    }
</style>
