import type React from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowDown, ArrowUp } from "lucide-react"

interface StatCardProps {
  title: string
  value: string
  change: string
  icon: React.ReactNode
  trend: "up" | "down" | "neutral"
}

export function StatCard({ title, value, change, icon, trend }: StatCardProps) {
  return (
    <Card className="border-none shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden relative group">
      {/* 修改这里：将overlay的z-index设置为-1，确保它不会覆盖文字内容 */}
      <div className="absolute inset-0 bg-gradient-to-r from-gray-100 to-gray-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 -z-10"></div>
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative z-10">
        <CardTitle className="text-sm font-medium">{title}</CardTitle>
        <div className="p-1.5 rounded-full bg-gray-100 group-hover:scale-110 transition-transform duration-300">
          {icon}
        </div>
      </CardHeader>
      <CardContent className="relative z-10">
        <div className="text-2xl font-bold">{value}</div>
        <div className="flex items-center mt-1">
          {trend === "up" && <ArrowUp className="h-4 w-4 text-green-500 mr-1" />}
          {trend === "down" && <ArrowDown className="h-4 w-4 text-red-500 mr-1" />}
          <p
            className={`text-xs ${trend === "up" ? "text-green-500" : trend === "down" ? "text-red-500" : "text-muted-foreground"}`}
          >
            {change}
          </p>
        </div>
      </CardContent>
    </Card>
  )
}