import { Skeleton } from "./Skeleton";
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";

type Layout = "agent-card" | "initiative-card" | "conversation-card" | "project-card" | "account-card";

interface SkeletonCardProps {
  layout?: Layout;
  className?: string;
}

export function SkeletonCard({ layout = "initiative-card", className }: SkeletonCardProps) {
  return (
    <Card className={cn("overflow-hidden", className)}>
      <CardContent className="p-4">
        {layout === "agent-card" && (
          <div className="space-y-3">
            <div className="flex items-center gap-2">
              <Skeleton variant="circle" className="h-2 w-2" />
              <Skeleton className="h-4 w-28" />
              <Skeleton className="ml-auto h-5 w-14 rounded-full" />
            </div>
            <Skeleton className="h-3 w-40" />
          </div>
        )}
        {layout === "initiative-card" && (
          <div className="space-y-3">
            <div className="flex items-center gap-2">
              <Skeleton className="h-5 w-40" />
              <Skeleton className="h-5 w-16 rounded-full" />
            </div>
            <Skeleton className="h-3 w-56" />
            <Skeleton className="h-2 w-full rounded-full" />
          </div>
        )}
        {layout === "conversation-card" && (
          <div className="space-y-3">
            <div className="flex items-center gap-2">
              <Skeleton variant="circle" className="h-6 w-6" />
              <Skeleton className="h-4 w-32" />
              <Skeleton className="ml-auto h-3 w-16" />
            </div>
            <Skeleton className="h-3 w-full" />
            <Skeleton className="h-3 w-3/4" />
          </div>
        )}
        {layout === "project-card" && (
          <div className="space-y-2">
            <Skeleton className="h-4 w-28" />
            <Skeleton className="h-3 w-48" />
          </div>
        )}
        {layout === "account-card" && (
          <div className="space-y-3">
            <div className="flex items-center gap-3">
              <Skeleton variant="circle" className="h-5 w-5" />
              <div className="flex-1 space-y-2">
                <Skeleton className="h-4 w-40" />
                <Skeleton className="h-3 w-28" />
              </div>
            </div>
            <div className="space-y-1.5 pl-8">
              <Skeleton className="h-2 w-full rounded-full" />
              <Skeleton className="h-2 w-3/4 rounded-full" />
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
}
