import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { formatDate } from "@/lib/utils"
import { Activity, User, ShoppingCart, MessageSquare } from "lucide-react"

export function RecentActivities() {
  // 这里应该从API获取实际数据
  const activities = [
    {
      id: 1,
      type: "user",
      title: "新用户注册",
      description: "张三通过微信小程序注册成为新用户",
      time: new Date(2023, 6, 15, 14, 30),
    },
    {
      id: 2,
      type: "purchase",
      title: "完成购买",
      description: "李四购买了高级会员服务",
      time: new Date(2023, 6, 15, 13, 45),
    },
    {
      id: 3,
      type: "message",
      title: "客户咨询",
      description: "王五咨询了产品使用问题",
      time: new Date(2023, 6, 15, 11, 20),
    },
    {
      id: 4,
      type: "activity",
      title: "活动参与",
      description: "赵六参与了新品推广活动",
      time: new Date(2023, 6, 15, 10, 15),
    },
  ]

  const getIcon = (type: string) => {
    switch (type) {
      case "user":
        return <User className="h-4 w-4" />
      case "purchase":
        return <ShoppingCart className="h-4 w-4" />
      case "message":
        return <MessageSquare className="h-4 w-4" />
      case "activity":
        return <Activity className="h-4 w-4" />
      default:
        return <Activity className="h-4 w-4" />
    }
  }

  return (
    <Card>
      <CardHeader className="pb-2">
        <CardTitle className="text-base font-medium">最近活动</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {activities.map((activity) => (
            <div key={activity.id} className="flex items-start space-x-3">
              <div className="bg-primary/10 rounded-full p-2 text-primary">{getIcon(activity.type)}</div>
              <div className="space-y-1">
                <p className="text-sm font-medium">{activity.title}</p>
                <p className="text-xs text-muted-foreground">{activity.description}</p>
                <p className="text-xs text-muted-foreground">{formatDate(activity.time)}</p>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}