<template>
  <div
    :class="[
      'rounded-[18px] border border-gray-200 bg-white p-[22px] shadow-[0_14px_26px_rgba(0,0,0,0.06)]',
      hoverable ? 'transition-[transform,box-shadow,border-color] duration-200 hover:-translate-y-1 hover:border-gray-300 hover:shadow-[0_20px_40px_rgba(0,0,0,0.1)]' : '',
    ]"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
defineProps<{
  hoverable?: boolean
}>()
</script>
