<template>
  <div :class="cardClasses">
    <div v-if="$slots.header || title" class="card-header">
      <h3 v-if="title" class="card-title">{{ title }}</h3>
      <slot name="header" />
    </div>
    
    <div class="card-body">
      <slot />
    </div>
    
    <div v-if="$slots.footer" class="card-footer">
      <slot name="footer" />
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  shadow: {
    type: Boolean,
    default: true
  },
  hover: {
    type: Boolean,
    default: false
  },
  glass: {
    type: Boolean,
    default: false
  },
  padding: {
    type: String,
    default: 'normal',
    validator: (value) => ['none', 'small', 'normal', 'large'].includes(value)
  }
})

const cardClasses = computed(() => {
  return [
    'card',
    {
      'card-shadow': props.shadow,
      'card-hover': props.hover,
      'card-glass': props.glass,
      [`card-padding-${props.padding}`]: true
    }
  ]
})
</script>

<style scoped>
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--card-border-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-duration) var(--transition-timing);
}

.card-shadow {
  box-shadow: var(--card-shadow);
}

.card-hover:hover {
  background: var(--color-bg-dark-95);
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--color-shadow-hover);
}

.card-glass {
  background: var(--color-white-rgb-05);
  backdrop-filter: blur(10px);
  border: 1px solid var(--color-white-rgb-1);
}

.card-glass:hover {
  background: var(--color-white-rgb-05);
  border-color: var(--color-white-rgb-15);
}

.card-header {
  padding: var(--spacing-2xl);
  border-bottom: 1px solid var(--color-border-primary);
  background: var(--color-white-rgb-05);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.card-body {
  flex: 1;
  overflow-y: auto;
}

.card-footer {
  padding: var(--spacing-xl) var(--spacing-2xl);
  border-top: 1px solid var(--color-border-primary);
  background: var(--color-white-rgb-05);
}

/* 内边距变体 */
.card-padding-none .card-header,
.card-padding-none .card-body,
.card-padding-none .card-footer {
  padding: 0;
}

.card-padding-small .card-header,
.card-padding-small .card-body,
.card-padding-small .card-footer {
  padding: var(--spacing-md);
}

.card-padding-normal .card-header,
.card-padding-normal .card-body,
.card-padding-normal .card-footer {
  padding: var(--spacing-2xl);
}

.card-padding-large .card-header,
.card-padding-large .card-body,
.card-padding-large .card-footer {
  padding: var(--spacing-3xl);
}

.card-padding-none .card-header,
.card-padding-none .card-footer {
  display: none;
}

.card-padding-small .card-header {
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
}

.card-padding-small .card-footer {
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
}

.card-padding-large .card-header {
  padding: var(--spacing-3xl) var(--spacing-3xl) var(--spacing-2xl);
}

.card-padding-large .card-footer {
  padding: var(--spacing-2xl) var(--spacing-3xl) var(--spacing-3xl);
}

/* 滚动条样式 */
.card-body::-webkit-scrollbar {
  width: 6px;
}

.card-body::-webkit-scrollbar-track {
  background: transparent;
}

.card-body::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  border-radius: 3px;
}

.card-body::-webkit-scrollbar-thumb:hover {
  background: var(--color-scrollbar-thumb-hover);
}
</style>