<template>
    <div class="hy-main" :style="{ width: `min(${resizeTo}%, ${maxWidth})` }">
        <slot />
    </div>
</template>

<script>
export default {
    name: "HyMain",
    props: {
        maxWidth: {
            type: String,
            default: "1400px",
        },
        resizeTo: {
            type: Number,
            default: 95,
        },
        usingHyHeader: {
            type: Boolean,
            default: false,
        },
    },
    mounted() {
        if (this.usingHyHeader) {
            console.error(
                "HyperUI Breaking Change Alert: Please do not use HyHeader inside HyMain. Refer to the documentation for more information: https://www.npmjs.com/package/@jaaahn/hyper-ui#recommended-navigation-code-structure. Remove this warning by setting the prop 'usingHyHeader' to 'false' (which is the default value).",
            );
        }
    },
};
</script>

<style lang="scss">
.hy-main {
    position: relative;
    margin: 50px auto 150px auto;

    /* &:has(.hy-header) {
        margin-top: 0;
    }

    .hy-header {
        &.isFloating > #visual {
            width: 100%;
            margin-left: 0;
            margin-right: 0;
        }

        &:not(.isFloating) {
            --100vw: calc(var(--hy-vw) * 100);
            --resize-to: calc(v-bind("resizeTo") * var(--hy-vw));
            --header-width: min(v-bind("maxWidth"), var(--resize-to));
            --side-gap: calc((var(--100vw) - var(--header-width)) / 2);

            transform: translateX(calc(-1 * var(--side-gap)));
            width: var(--100vw);
        }
    } */
}
</style>
