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

    let {
        properties,
        title,
        upperDescription,
        lowerDescription,
        reverse = false,

        primaryContent,
    }: {
        properties: Array<{ title: string; icon: string; color: string }>
        title: string
        upperDescription: string
        reverse?: boolean
        lowerDescription: string
        primaryContent: () => any
    } = $props()
</script>

<section
    class="product-frame"
    class:reverse
>
    <div class="wrapper">
        {#if !reverse}
            <div class="primary">
                {@render primaryContent()}
            </div>
        {/if}

        <div class="content">
            <h2 class="h1">{title}</h2>
            <p>{@html upperDescription}</p>
            <ul>
                {#each properties as property}
                    <li>
                        <span style="color: {property.color};"
                            ><Icon
                                path={property.icon}
                                size="2.4rem"
                            />
                        </span>
                        <span style="color: {property.color};">{property.title}</span>
                    </li>
                {/each}
            </ul>
            <p>{@html lowerDescription}</p>
        </div>
        {#if reverse}
            <div class="primary">
                {@render primaryContent()}
            </div>
        {/if}
    </div>
</section>

<style
    lang="less"
    global
>
    @import "../../assets/css/variables.less";
    .product-frame {
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2.4rem;
        max-width: 100%;
        height: 100%;
        width: 100%;
        padding-bottom: 4.8rem;

        .wrapper {
            width: var(--small-max-width);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 2.4rem;

            .primary {
                width: 400px;
                min-width: 400px;
                max-height: 100%;
                height: 100%;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
                .shadow {
                    display: none;
                }
            }

            .content {
                height: 100%;
                flex-grow: 1;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                gap: 2.4rem;
                z-index: 99;

                p {
                    color: var(--text-reverse-100);
                }
                ul {
                    display: flex;
                    width: 100%;
                    justify-content: space-between;
                    li {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        gap: 0.6rem;
                        span {
                            font-size: 0.8rem;
                            font-weight: 700;
                            text-transform: uppercase;
                        }
                    }
                }
            }
            @media @mobile {
                flex-direction: column;
                padding: 0px;
                .content {
                    ul {
                        flex-direction: column;
                        gap: 1.2rem;
                        li {
                            flex-direction: row;
                            span:first-child {
                                width: 100px;
                                display: flex;
                                justify-content: center;
                            }
                        }
                    }
                }
                .img {
                    max-width: 100%;
                    position: absolute;
                    bottom: 0px;
                    width: 100%;
                    height: 100%;
                    z-index: 1;
                    .shadow {
                        display: block;
                        position: absolute;
                        bottom: 0px;
                        width: 100%;
                        height: 100%;
                        background: rgba(13, 12, 12, 0.5);
                        z-index: 2;
                    }
                }
            }
            h2 {
                color: var(--primary-200);
                font-weight: 700;
            }
        }
        &.reverse {
            background-color: var(--bg-100);
            p {
                color: var(--text-100) !important;
            }
        }
    }
</style>
