<script lang="ts">
    export let brightColor = true
    export let edges = true,
        bigVersion = false,
        icon: string
    console.log("ICON WTFDOFJSIKDJ?", icon)
    //
</script>

<div
    id="crinkle"
    class:bigVersion
>
    <div
        class="crinkle-background"
        class:brightColor
    >
        {#if $$slots.icon}
            <slot name="icon" />
        {:else}
            <img
                src="../../../media/{icon
                    ? icon
                    : edges
                      ? brightColor
                          ? 'topRightCrinkledBrightAndEdged'
                          : 'topRightCrinkledDarkAndEdged'
                      : brightColor
                        ? 'topRightCrinkleBrightAndUnedged'
                        : 'topRightCrinkledDarkAndUnedged'}.svg"
                alt="crinkle"
            />
        {/if}
    </div>
    <div class="action-container">
        <slot />
    </div>
</div>

<style lang="less">
    #crinkle {
        height: calc(3rem - 2px);
        width: 3rem;
        margin-left: -3px;
        &.bigVersion {
            height: 72px;
            width: 72px;
        }
        .crinkle-background {
            position: relative;
            height: 100%;
            width: 100%;
            overflow: visible;
            img {
                object-fit: cover;
                height: 100%;
                width: 100%;
            }
            &.brightColor {
            }
        }
    }
</style>
