<template>
  <div :class="cardClass">
    <div v-if="$slots.header" class="px-6 py-4 border-b border-gray-200 text-gray-900">
      <slot name="header" />
    </div>
    <div class="px-6 py-4 text-gray-900">
      <slot />
    </div>
    <div v-if="$slots.footer" class="px-6 py-4 border-t border-gray-200 bg-gray-50/50 text-gray-900">
      <slot name="footer" />
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  variant?: 'default' | 'elevated'
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'default'
})

const cardClass = computed(() => {
  const base = 'bg-white/80 backdrop-blur-xl rounded-2xl border border-white/20 overflow-hidden text-gray-900'
  const variants = {
    default: `${base} shadow-sm`,
    elevated: `${base} shadow-2xl shadow-black/5`
  }
  return variants[props.variant]
})
</script>

