<template>
  <div :class="cardClasses">
    <template v-if="variant === 'empty-state'">
      <div class="card-body empty-state-content">
        <VIcon v-if="emptyIcon" :name="emptyIcon" class="empty-state-icon" size="lg" />
        <h3 v-if="emptyTitle" class="empty-state-title">{{ emptyTitle }}</h3>
        <p v-if="emptyMessage" class="empty-state-message">{{ emptyMessage }}</p>
        <div v-if="$slots['empty-actions']" class="empty-state-actions">
          <slot name="empty-actions"></slot>
        </div>
      </div>
    </template>
    <template v-else>
      <div v-if="$slots.header || headerTitle" class="card-header">
        <slot name="header">
          <h2 v-if="headerTitle" class="card-header-title">{{ headerTitle }}</h2>
        </slot>
      </div>
      <div class="card-body">
        <slot></slot>
      </div>
      <div v-if="$slots.footer" class="card-footer">
        <slot name="footer"></slot>
      </div>
    </template>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, PropType } from 'vue';
import VIcon from './VIcon.vue'; // Assuming VIcon is in the same directory or globally registered

type CardVariant = 'default' | 'empty-state';

export default defineComponent({
  name: 'VCard',
  components: {
    VIcon,
  },
  props: {
    headerTitle: {
      type: String,
      default: null,
    },
    variant: {
      type: String as PropType<CardVariant>,
      default: 'default',
      validator: (value: string) => ['default', 'empty-state'].includes(value),
    },
    // Empty state specific props
    emptyIcon: {
      type: String,
      default: null,
    },
    emptyTitle: {
      type: String,
      default: null,
    },
    emptyMessage: {
      type: String,
      default: null,
    },
  },
  setup(props) {
    const cardClasses = computed(() => [
      'card',
      { 'empty-state-card': props.variant === 'empty-state' },
    ]);

    return {
      cardClasses,
    };
  },
});
</script>

<style lang="scss" scoped>
.card {
  background-color: #fff;
  border: 1px solid #e0e0e0; // Example border color
  border-radius: 0.375rem; // 6px, example
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); // Subtle shadow
  display: flex;
  flex-direction: column;
}

.card-header {
  padding: 1rem 1.25rem; // Example padding
  border-bottom: 1px solid #e0e0e0;
  background-color: #f8f9fa; // Light background for header

  .card-header-title {
    margin: 0;
    font-size: 1.25rem; // Larger font for header title
    font-weight: 500;
  }
  // If using custom slot, ensure its content is styled appropriately
}

.card-body {
  padding: 1.25rem; // Example padding
  flex-grow: 1; // Allows body to expand if card has fixed height or content pushes footer
}

.card-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid #e0e0e0;
  background-color: #f8f9fa; // Light background for footer
  display: flex; // Useful for aligning items in the footer (e.g., buttons)
  justify-content: flex-end; // Example: align buttons to the right
  gap: 0.5rem; // Space between items in footer if multiple
}

// Empty state variant
.empty-state-card {
  // Specific overall card styling for empty state if needed
  // e.g. it might have a different border or background
  // For now, it mainly affects the content layout via .empty-state-content
  border-style: dashed; // Example: dashed border for empty state
  border-color: #adb5bd;
}

.empty-state-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem; // More padding for empty state
  min-height: 200px; // Ensure it has some presence

  .empty-state-icon {
    // VIcon's size prop is used, but we can add margin or color here
    // font-size: 3rem; // If VIcon size prop wasn't sufficient
    color: #6c757d; // Muted color for icon (e.g., Gray-600)
    margin-bottom: 1rem;
  }

  .empty-state-title {
    font-size: 1.5rem; // Larger title for empty state
    font-weight: 500;
    color: #343a40; // Darker color for title (e.g., Gray-800)
    margin-top: 0;
    margin-bottom: 0.5rem;
  }

  .empty-state-message {
    font-size: 1rem;
    color: #6c757d; // Muted color for message (e.g., Gray-600)
    margin-bottom: 1.5rem;
    max-width: 400px; // Constrain message width for readability
  }

  .empty-state-actions {
    display: flex;
    gap: 0.75rem; // Space between action buttons
    // Buttons inside will be styled by VButton or other button components
  }
}
</style>
