<script lang="ts">
    let { 
        children,
        gap = '1rem',
        justify = 'flex-start',
        align = 'stretch',
        wrap = false
    } = $props();
</script>

<div 
    class="row" 
    style:gap
    style:justify-content={justify}
    style:align-items={align}
    style:flex-wrap={wrap ? 'wrap' : 'nowrap'}
>
    {@render children()}
</div>

<style>
    .row {
        display: flex;
        flex-direction: row;
        width: 100%;
    }
</style>
