<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    class?: string
    ux?: any
    src: string
    to?: string
    mode?: 'cover' | 'center'
    hover?: 'zoom' | 'lift'
    clip?: boolean
  }>(),
  {
    clip: false,
  }
)

const classes = useStyling(
  'imageTransformed',
  {
    slots: {
      base: 'w-full h-full relative isolate',
      link: '',
      image: 'transition duration-300 ease-in-out z-10',
      overlay: 'absolute inset-0 z-25 pointer-events-none',
    },
    variants: {
      mode: {
        cover: {
          image: 'w-full h-full object-cover',
        },
        center: {
          base: 'flex justify-center items-center',
        },
      },
      hover: {
        zoom: {
          image: 'hover:scale-105',
        },
        lift: {
          image: 'hover:-translate-y-2',
        },
      },
      clip: {
        true: {
          base: 'overflow-hidden',
        },
        false: {},
      },
    },
    defaultVariants: {
      mode: 'cover',
      hover: 'zoom',
    },
  },
  props
)
</script>

<template>
  <div :class="classes.base">
    <NuxtLink v-if="props.to" :class="classes.link" :to="props.to">
      <NuxtImg :class="classes.image" :src="props.src" />
    </NuxtLink>
    <NuxtImg v-else :class="classes.image" :src="props.src" />
    <div v-if="$slots.default" :class="classes.overlay">
      <slot />
    </div>
  </div>
</template>
