import React from "react";
import { Container } from "@/components/common/Container";
import { Card, CardContent } from "@/components/common/Card";
import { cn } from "@/lib/utils";

function Bone({ className, style }: { className?: string; style?: React.CSSProperties }) {
  return (
    <div className={cn("animate-pulse rounded-xl bg-slate-200 dark:bg-slate-700/50", className)} style={style} />
  );
}

export function AgentTransactionsSkeleton() {
  return (
    <Container className="max-w-full space-y-6 pb-10">
      <Bone className="h-[88px] rounded-3xl" />

      {/* Tab pills */}
      <div className="flex gap-2">
        {[80, 64, 72].map((w, i) => (
          <Bone key={i} className={`h-9 w-${w} rounded-full`} style={{ width: `${w * 4}px` }} />
        ))}
      </div>

      {/* Stats */}
      <div className="grid gap-4 sm:grid-cols-3">
        {[0, 1, 2].map((i) => (
          <Card key={i}>
            <CardContent className="space-y-2 py-5">
              <Bone className="h-3.5 w-28" />
              <Bone className="h-6 w-20" />
            </CardContent>
          </Card>
        ))}
      </div>

      <Card>
        <CardContent className="space-y-4">
          <Bone className="h-11 w-64 rounded-2xl" />
          <div className="space-y-3">
            {[0, 1, 2, 3, 4].map((i) => (
              <Bone key={i} className="h-16 rounded-xl" />
            ))}
          </div>
        </CardContent>
      </Card>
    </Container>
  );
}