<script setup lang="ts">
import type { LayoutContainedFragment } from "#graphql/fragments";
import { tv, type VariantProps } from "tailwind-variants";

const props = defineProps<LayoutContainedFragment>();

const layoutWrapperVariants = tv({
  slots: {
    base: "",
    inner: "",
  },
  variants: {
    container: {
      default: { inner: "container" },
      lg: { inner: "container-lg" },
      xl: { inner: "container-xl" },
      fluid: { inner: "container-fluid" },
      none: { inner: "container-none" },
    },
    verticalPadding: {
      sm: { base: "py-3" },
      md: { base: "py-6" },
      lg: { base: "py-12" },
    },
    bgColor: {
      default: { base: "bg-default" },
      muted: { base: "bg-muted" },
      inverted: { base: "bg-inverted text-inverted" },
    },
  },
  defaultVariants: {
    container: "default",
    verticalPadding: "md",
    bgColor: "default",
  },
});
const { base, inner } = layoutWrapperVariants({
  container: props.container[0],
  verticalPadding: props.verticalPadding[0],
  bgColor: props.bgColor[0],
} as VariantProps<typeof layoutWrapperVariants>);
</script>

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