<template>
  <view class="card bg-white rounded-card p-4 mb-3 clickable" :class="cardClass" @click="onClick">
    <slot />
  </view>
</template>

<script setup lang="ts">
const props = defineProps<{
  cardClass?: string
}>()

const emit = defineEmits<{
  (e: 'click'): void
}>()

function onClick() {
  emit('click')
}
</script>

<style scoped>
.card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.card:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
</style>
