<script setup lang="ts">
import type { vue } from '@factor/api'
import type { Card } from '../card'

defineProps({
  card: {
    type: Object as vue.PropType<Card>,
    required: true,
  },

})
</script>

<template>
  <div class="layout-engine">
    <template v-if="card?.cards.value.length">
      <div v-for="(subCard, i) in card?.cards.value" :key="i">
        <component
          :is="subCard.tpl.value?.settings.el"
          :card="subCard"
        />
      </div>
    </template>
  </div>
</template>

<style lang="less">
.layout-engine {
  .edge-padding {
    @apply px-4 sm:px-6 lg:px-10;
  }
  .content-wide {
    @apply max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-10;
  }
  .content-standard {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-10;
  }

  .space-md {
    margin-top: calc(2rem + 4vw);
    margin-bottom: calc(2rem + 4vw);
  }

  .space-lg {
    padding-top: calc(3rem + 6vw);
    padding-bottom: calc(3rem + 6vw);
  }
}
</style>
