<template>
  <div class="container mx-auto p-4">
    <atropos-component ref="atropos" class="my-atropos" active-offset="40" shadow-scale="1.05">
      <img src="https://files.erudi.fr/screenshit/41684f3ebccdde7352339aa0ae79bc43d50a2b79.jpg" data-atropos-offset="-5" alt="3D Image 2" />
      <img src="/logo.svg" alt="3D Image" data-atropos-offset="0" class="absolute inset-0 w-full h-full object-cover" />
    </atropos-component>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';

const atropos = ref(null);

onMounted(() => {
  atropos.value.addEventListener('enter', () => {
    console.log('Entered');
  });
  atropos.value.addEventListener('leave', () => {
    console.log('Left');
  });
  atropos.value.addEventListener('rotate', (event) => {
    console.log('Rotate', event.detail);
  });
});
</script>

<style scoped>
.my-atropos {
  width: 320px;
  height: 160px;
}
</style>
