import { DashboardHeader } from "@/components/dashboard-header"
import { DashboardShell } from "@/components/dashboard-shell"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
import { Trophy } from "lucide-react"

export default function AchievementsLoading() {
  return (
    <DashboardShell>
      <DashboardHeader heading="成就管理" text="创建和管理系统成就">
        <Button disabled className="bg-gradient-to-r from-amber-500 to-orange-600">
          <Trophy className="mr-2 h-4 w-4" />
          添加成就
        </Button>
      </DashboardHeader>
      <div className="grid gap-4">
        <Card className="p-4">
          <div className="flex items-center gap-2 mb-4">
            <Skeleton className="h-8 w-32" />
            <Skeleton className="h-8 w-24" />
            <Skeleton className="h-8 w-24 ml-auto" />
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {Array(6)
              .fill(null)
              .map((_, i) => (
                <Card key={i} className="p-4 space-y-3">
                  <div className="flex items-center gap-3">
                    <Skeleton className="h-10 w-10 rounded-full" />
                    <div className="space-y-1 flex-1">
                      <Skeleton className="h-4 w-3/4" />
                      <Skeleton className="h-3 w-1/2" />
                    </div>
                  </div>
                  <Skeleton className="h-16 w-full" />
                  <div className="flex justify-between">
                    <Skeleton className="h-8 w-20" />
                    <Skeleton className="h-8 w-20" />
                  </div>
                </Card>
              ))}
          </div>
        </Card>
      </div>
    </DashboardShell>
  )
}