---
export interface Props {
	title: string;
	value: string | number;
	subtitle?: string;
	icon?: string;
	color?: string;
	gradient?: {
		from: string;
		to: string;
	};
	size?: "small" | "medium" | "large";
	trend?: {
		value: number;
		isPositive: boolean;
		label?: string;
	};
	link?: {
		url: string;
		text: string;
	};
}

const {
	title,
	value,
	subtitle,
	icon,
	color = "#3B82F6",
	gradient,
	size = "medium",
	trend,
	link,
} = Astro.props;

// 尺寸样式映射
const getSizeClasses = (size: string) => {
	switch (size) {
		case "small":
			return {
				container: "p-3",
				value: "text-xl",
				title: "text-xs",
				subtitle: "text-xs",
				icon: "text-lg",
				iconContainer: "w-8 h-8",
			};
		case "large":
			return {
				container: "p-6",
				value: "text-4xl",
				title: "text-base",
				subtitle: "text-sm",
				icon: "text-2xl",
				iconContainer: "w-12 h-12",
			};
		default: // medium
			return {
				container: "p-4",
				value: "text-2xl",
				title: "text-sm",
				subtitle: "text-xs",
				icon: "text-xl",
				iconContainer: "w-10 h-10",
			};
	}
};

const sizeClasses = getSizeClasses(size);

// 生成渐变背景样式
const getBackgroundStyle = () => {
	if (gradient) {
		return `background: linear-gradient(135deg, ${gradient.from}, ${gradient.to})`;
	}
	return `background: linear-gradient(135deg, ${color}15, ${color}25)`;
};

// 生成图标容器样式
const getIconStyle = () => {
	return `background-color: ${color}20; color: ${color}`;
};
---

<div 
  class="rounded-lg border border-black/10 dark:border-white/10 hover:shadow-lg transition-all duration-300 group cursor-pointer"
  style={getBackgroundStyle()}
>
  <div class={sizeClasses.container}>
    <!-- 顶部：图标和趋势 -->
    <div class="flex items-start justify-between mb-3">
      <!-- 图标 -->
      {icon && (
        <div 
          class={`rounded-lg flex items-center justify-center ${sizeClasses.iconContainer}`}
          style={getIconStyle()}
        >
          <iconify-icon icon={icon} class={sizeClasses.icon}></iconify-icon>
        </div>
      )}
      
      <!-- 趋势指示器 -->
      {trend && (
        <div class={`flex items-center gap-1 ${trend.isPositive ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
          <iconify-icon 
            icon={trend.isPositive ? 'material-symbols:trending-up' : 'material-symbols:trending-down'} 
            class="text-sm"
          ></iconify-icon>
          <span class="text-xs font-medium">
            {trend.isPositive ? '+' : ''}{trend.value}%
          </span>
        </div>
      )}
    </div>
    
    <!-- 主要数值 -->
    <div class={`font-bold mb-1 ${sizeClasses.value}`} style={`color: ${color}`}>
      {value}
    </div>
    
    <!-- 标题 -->
    <div class={`font-medium text-black/70 dark:text-white/70 mb-1 ${sizeClasses.title}`}>
      {title}
    </div>
    
    <!-- 副标题 -->
    {subtitle && (
      <div class={`text-black/60 dark:text-white/60 ${sizeClasses.subtitle}`}>
        {subtitle}
      </div>
    )}
    
    <!-- 趋势标签 -->
    {trend && trend.label && (
      <div class={`text-black/50 dark:text-white/50 mt-1 ${sizeClasses.subtitle}`}>
        {trend.label}
      </div>
    )}
    
    <!-- 链接 -->
    {link && (
      <div class="mt-3">
        <a 
          href={link.url}
          class={`text-blue-600 dark:text-blue-400 hover:underline font-medium transition-colors ${sizeClasses.subtitle}`}
        >
          {link.text} →
        </a>
      </div>
    )}
  </div>
  
  <!-- 悬停效果 -->
  <div class="absolute inset-0 bg-white/5 dark:bg-black/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg pointer-events-none"></div>
</div>

<script>
  // 加载 Iconify 图标库
  if (typeof window !== 'undefined' && !window.iconifyLoaded) {
    const script = document.createElement('script');
    script.src = 'https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js';
    document.head.appendChild(script);
    window.iconifyLoaded = true;
  }
</script>

<style>
  .group {
    position: relative;
  }
</style>