<script>
    import Button from "$lib/Button.svelte";

    let {
        children, 
        title = "Titre",
        action = () => console.log("Default action"),
        action_title = "Click me"
    } = $props();

</script>

<main>
    <div class="triangle-pattern">
        
        <div class="content-wrapper">
            <h4>{title}</h4>
            <div class="child">
                {@render children?.()}
            </div>
        </div>

        {#if action} 
            <div class="button-div">
                <Button 
                    action={action}
                    label={action_title} 
                    --button-color="var(--secondary)"
                />
            </div>
        {/if}

    </div>
</main>

<style>
    main {
        border-color: var(--text, #000); 
        
        border-style: solid;
        border-width: 0.15em;
        margin: 1em;
        background-color: var(--primary-soft, #f4f4f4);
        
        min-height: 200px; 
    }

    .triangle-pattern {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        min-height: inherit; 

        background-image: 
            linear-gradient(135deg, var(--primary, #333) 10px, transparent 11px), 
            linear-gradient(45deg, var(--primary, #333) 10px, transparent 11px),
            linear-gradient(to right, var(--primary, #333) 50px, transparent 50px); 
        background-size: 
            30px 30px,
            30px 30px,
            100% 100%; 
        background-position: 
            50px 50px,
            50px 50px,
            0 0;
        background-repeat: 
            repeat-y,
            repeat-y,
            no-repeat;
    }

    .content-wrapper {
        margin: 1em;
        margin-top: 0;
    }

    h4 {
        margin: 20px 0;
        margin-left: 60px; 
    }

    .child {
        margin-left: 60px; 
        display: flex;
        position: relative;
    }

    .button-div {
        display: flex;
        justify-content: flex-end; 
        margin: 1em;
        margin-top: auto; 
    }

    @media (max-width: 768px) {
        .triangle-pattern {
            background-image: none;
        }
        .child{
            margin: 0 0;
        }
    }


</style>
    