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

const tvSectionHeroSplit = tv({
  slots: {
    base: "py-6",
    container: "container flex flex-col gap-6 items-center",
    content: "flex-1",
    media: "w-full basis-1/2",
  },
  variants: {
    reverse: {
      false: {
        container: "lg:flex-row",
      },
      true: {
        container: "lg:flex-row-reverse",
      },
    },
  },
  defaultVariants: {
    reverse: false,
  },
});

const props = defineProps<SectionHeroSplitFragment>();
const classes = tvSectionHeroSplit({
  reverse: props.reverse,
} as VariantProps<typeof tvSectionHeroSplit>);
</script>

<template>
  <section :class="classes.base()">
    <div :class="classes.container()">
      <UiProse :content="content" :class="classes.content()" />
      <AcfMedia :media="$props" :class="classes.media()" />
    </div>
  </section>
</template>
