<script lang="ts" setup>
import { computed } from 'vue'

interface LayoutProrps {
	gap?: number
	h100?: boolean
	columns?: string[]
	mColumns?: string[]
	mRows?: string[]
	rows?: string[]
	mGap?: number
}

const props = withDefaults(defineProps<LayoutProrps>(), {
	gap: 0.5,
	h100: false,
	columns: () => ([]),
	rows: () => ([]),
	mColumns: () => ([]),
	mRows: () => ([]),
	mGap: undefined,

})

const gridTemplateRows = computed(() => (props.rows.length > 0 ? props.rows.join(' ') : 'auto'))
const gapSize = computed(() => `${props.gap}rem`)
const mGapSize = computed(() => props.mGap !== undefined ? `${props.mGap}rem` : gapSize.value)

const mGridTemplateRows = computed(() => {
	if (props.mRows?.length) { return props.mRows.join(' ') }
	return gridTemplateRows.value
})

const gridTemplateColumns = computed(() => (props.columns.length > 0 ? props.columns.join(' ') : 'auto'))

const mGridTemplateColumns = computed(() => {
	if (props.mColumns?.length) { return props.mColumns.join(' ') }
	return gridTemplateColumns.value
})
</script>

<template>
	<div class="layout" :class="{ 'layout-h-100': h100 }">
		<slot />
	</div>
</template>

<style scoped>
.layout {
  min-height: 100px;
  display: grid;
  gap: v-bind(gapSize);
  grid-template-rows: v-bind(gridTemplateRows);
  grid-template-columns: v-bind(gridTemplateColumns);
}

@media screen and (max-width: 910px) {
  .layout {
	gap: v-bind(mGapSize);
    grid-template-rows: v-bind(mGridTemplateRows);
    grid-template-columns: v-bind(mGridTemplateColumns);
  }
}
</style>
