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

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

const props = defineProps<{ media: AcfMediaFragment }>();

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 classes = tvAcfMedia(props.media);
</script>

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