"use client";

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

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

function SenderCardSkeleton() {
  return (
    <div className="rounded-2xl border border-slate-200/70 bg-white p-5 dark:border-slate-800/80 dark:bg-slate-900/70">
      <div className="flex items-start gap-3.5">
        <Bone className="h-11 w-11 shrink-0 rounded-full" />
        <div className="flex-1 space-y-2 pt-0.5">
          <Bone className="h-4 w-32" />
          <Bone className="h-3 w-44" />
        </div>
      </div>
      <div className="mt-4 grid grid-cols-2 gap-2 rounded-xl bg-slate-50 p-3 dark:bg-slate-800/40">
        <div className="space-y-1.5">
          <Bone className="h-2.5 w-12" />
          <Bone className="h-3.5 w-20" />
        </div>
        <div className="space-y-1.5">
          <Bone className="h-2.5 w-8" />
          <Bone className="h-3.5 w-14" />
        </div>
      </div>
    </div>
  );
}

export function AgentSendersSkeleton() {
  return (
    <Container className="max-w-full space-y-6 pb-10">
      <Bone className="h-[88px] rounded-3xl" />
      <Card>
        <CardContent className="space-y-5">
          <Bone className="mx-auto h-10 w-full max-w-sm rounded-xl" />
          <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
            {[0, 1, 2, 3, 4, 5].map((i) => (
              <SenderCardSkeleton key={i} />
            ))}
          </div>
        </CardContent>
      </Card>
    </Container>
  );
}