<template>
  <q-card 
    :class="[
      'rounded-lg shadow-md transition-shadow',
      hoverable && 'hover:shadow-lg cursor-pointer',
      customClass
    ]"
    style="border: 1px solid #e5e7eb;"
    @click="handleClick"
  >
    <!-- Card Header -->
    <q-card-section v-if="$slots.header || title" class="border-b border-gray-200">
      <div class="flex justify-between items-center">
        <div>
          <h3 v-if="title" class="text-lg font-semibold text-gray-900">{{ title }}</h3>
          <p v-if="subtitle" class="text-sm text-gray-600 mt-1">{{ subtitle }}</p>
        </div>
        <slot name="header-actions"></slot>
      </div>
      <slot name="header"></slot>
    </q-card-section>

    <!-- Card Content -->
    <q-card-section :class="contentClass">
      <slot></slot>
    </q-card-section>

    <!-- Card Footer -->
    <q-card-section v-if="$slots.footer" class="border-t border-gray-200">
      <slot name="footer"></slot>
    </q-card-section>
  </q-card>
</template>

<script setup lang="ts">
interface Props {
  title?: string;
  subtitle?: string;
  hoverable?: boolean;
  customClass?: string;
  contentClass?: string;
}

withDefaults(defineProps<Props>(), {
  title: '',
  subtitle: '',
  hoverable: false,
  customClass: '',
  contentClass: ''
});

const emit = defineEmits<{
  click: [];
}>();

const handleClick = () => {
  emit('click');
};
</script>
