<template>
  <div
    :class="[
      'xGlass rounded-2xl transition-all duration-300 hover:shadow-lg',
      sizeClasses,
      { 'xGlow-border': glow }
    ]"
  >
    <!-- Header -->
    <header v-if="title || $slots.header" class="mb-4">
      <slot name="header">
        <h3 class="xText-title text-neutral-900 dark:text-white">{{ title }}</h3>
        <p v-if="subtitle" class="mt-1 text-neutral-600 dark:text-neutral-400">
          {{ subtitle }}
        </p>
      </slot>
    </header>

    <!-- Content -->
    <slot />

    <!-- Footer -->
    <footer v-if="$slots.footer" class="mt-6 pt-4 border-t border-white/10 dark:border-neutral-800">
      <slot name="footer" />
    </footer>
  </div>
</template>

<script setup>
const props = defineProps({
  /** Card title */
  title: {
    type: String,
    default: '',
  },
  /** Card subtitle */
  subtitle: {
    type: String,
    default: '',
  },
  /** Card size (padding) */
  size: {
    type: String,
    default: 'md',
    validator: (v) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(v),
  },
  /** Add glow border effect */
  glow: {
    type: Boolean,
    default: false,
  },
});

const sizeClasses = computed(() => {
  const sizes = {
    xs: 'p-3',
    sm: 'p-4',
    md: 'p-6',
    lg: 'p-8',
    xl: 'p-10',
  };
  return sizes[props.size];
});
</script>
