import { Container } from "@/components/common/Container";
import { Card, CardContent } from "@/components/common/Card";

export function TransactionDetailSkeleton() {
  return (
    <Container className="max-w-full space-y-6">
      <div className="h-5 w-32 animate-pulse rounded-md bg-slate-200 dark:bg-slate-700" />
      <Card>
        <CardContent className="space-y-4">
          {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
            <div key={i} className="flex justify-between gap-4">
              <div className="h-4 w-1/3 animate-pulse rounded-md bg-slate-200 dark:bg-slate-700" />
              <div className="h-4 w-2/5 animate-pulse rounded-md bg-slate-200 dark:bg-slate-700" />
            </div>
          ))}
        </CardContent>
      </Card>
    </Container>
  );
}