<script setup lang="ts">
import { tv } from "tailwind-variants";

import type { AcfLayoutFragment } from "#graphql/types";

const props = defineProps<{ layout: AcfLayoutFragment }>();

const tvLayoutVariants = tv({
  slots: {
    base: "",
    inner: "",
  },
  variants: {
    display: {
      block: { inner: "block" },
      flex: { inner: "flex flex-col gap-6" },
      grid: { inner: "grid" },
    },

    color: {
      default: { base: "bg-default" },
      muted: { base: "bg-muted" },
      inverted: { base: "bg-inverted text-inverted" },
      primary: { base: "bg-primary text-inverted" },
    },

    container: {
      default: { inner: "container" },
      xl: { inner: "container-xl" },
      lg: { inner: "container-lg" },
      md: { inner: "container-md" },
      sm: { inner: "container-sm" },
      fluid: { inner: "container-fluid" },
      none: { inner: "container-none" },
    },

    verticalPadding: {
      none: { base: "py-0" },
      sm: { base: "py-6" },
      md: { base: "py-12" },
      lg: { base: "py-24" },
    },
  },
  defaultVariants: {
    display: "block",
    color: "default",
    container: "default",
    verticalPadding: "md",
  },
});

const { base, inner } = tvLayoutVariants(props.layout);
</script>

<template>
  <section :class="base()">
    <div :class="inner()">
      <slot />
    </div>
  </section>
</template>
