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

const tvAcfMedia = tv({
  slots: {
    image: "w-full",
  },
  variants: {
    aspectRatio: {
      square: { image: "aspect-[1/1]" },
      video: { image: "aspect-video" },
      portrait: { image: "aspect-[2/3]" },
      auto: { image: "aspect-auto" },
    },
    objectFit: {
      cover: { image: "object-cover" },
      contain: { image: "object-contain" },
    },
  },
  defaultVariants: {
    aspectRatio: "auto",
    objectFit: "cover",
  },
});

const props = defineProps<{ media?: AcfMediaFragment }>();
const classes = tvAcfMedia({
  aspectRatio: props.media?.aspectRatio,
  objectFit: props.media?.objectFit,
} as VariantProps<typeof tvAcfMedia>);
</script>

<template>
  <AcfImage v-if="media?.image?.node" :image="media.image.node" :class="classes.image()" />
</template>
