<script setup lang="ts">
import { cn } from "@/lib/utils";

const props = withDefaults(
  defineProps<{ class?: string; hoverEffect?: boolean }>(),
  { hoverEffect: true },
);
</script>

<template>
  <div
    v-motion
    :initial="{ opacity: 0, y: 20 }"
    :visible-once="{ opacity: 1, y: 0, transition: { duration: 500 } }"
    :hovered="props.hoverEffect ? { scale: 1.02, transition: { duration: 200 } } : {}"
    :class="cn(
      'relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 p-6 backdrop-blur-md shadow-xl',
      props.class,
    )"
  >
    <div class="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent pointer-events-none" />
    <div class="relative z-10">
      <slot />
    </div>
  </div>
</template>
