<template>
  <el-card class="header-card" shadow="hover">
    <h1 class="title">
      <el-icon v-if="icon" :size="24" class="title-icon">
        <component :is="icon" />
      </el-icon>
      <span class="title-text">{{ title }}</span>
    </h1>
    <p v-if="subtitle" class="subtitle">{{ subtitle }}</p>
  </el-card>
</template>

<script setup>
/**
 * 页面标题组件 - 冷灰紫主题
 * @description 统一的页面头部展示
 */
defineProps({
  /** 页面标题 */
  title: {
    type: String,
    required: true
  },
  /** 图标组件或组件名称 */
  icon: {
    type: [String, Object],
    default: null
  },
  /** 副标题 */
  subtitle: {
    type: String,
    default: ''
  }
})
</script>

<style scoped>
.header-card {
  margin-bottom: 20px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}

.header-card:hover {
  border-color: var(--border-light);
}

.title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.title-icon {
  color: var(--primary);
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(146, 124, 255, 0.3));
}

.title-text {
  line-height: 1.2;
}

.subtitle {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 14px;
}

@media (max-width: 768px) {
  .title {
    font-size: 18px;
  }
}
</style>
