<script lang="ts">
    import TopRightCrinkle from "./widgets/TopRightCrinkle.svelte"

    let {
        brightBackground = true,
        border = true,
        activated = true,
        icon,
        bigVersion,
        contentSnippet,
    }: {
        brightBackground?: boolean
        border?: boolean
        activated?: boolean
        icon?: string
        bigVersion?: boolean
        contentSnippet: () => any
    } = $props()
</script>

{#if activated}
    <section
        id="crinkled-section"
        class={brightBackground ? "bright" : "dark"}
    >
        <div class="upper-row">
            <div
                class="bar"
                class:border
            ></div>
            <TopRightCrinkle
                edges={border}
                brightColor={!brightBackground}
                {icon}
                {bigVersion}
            />
        </div>
        {@render contentSnippet()}
    </section>
{:else}
    {@render contentSnippet()}
{/if}

<style lang="less">
    #crinkled-section {
        width: 100%;
        display: flex;
        z-index: 2000;
        margin-top: -3rem;
        align-items: center;
        flex-direction: column;

        .upper-row {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            justify-content: flex-start;
            height: 3rem;
            position: relative;
            overflow: hidden;
            .bar {
                flex: 1;
                height: 100%;
                background: var(--neutral-white);
                &.border {
                    border-top: 2px solid black;
                }
            }
        }

        &.bright {
            .bar {
                background: var(--neutral-white);
                &.border {
                    border-top: 2px solid var(--bg-100);
                }
            }
        }
        &.dark {
            .bar {
                background: var(--bg-100);
                &.border {
                    border-top: 2px solid var(--neutral-white);
                }
            }
        }
    }
</style>
