app/(audiences)/components/chat-bot-grid-skeleton.tsx

/**
 * ChatBotGridSkeleton - A loading placeholder component that displays a grid of skeleton cards
 * Used to show a loading state while chat bot data is being fetched
 * Renders 6 identical skeleton cards in a responsive grid layout
 */
export default function ChatBotGridSkeleton() {
  return (
    // Responsive grid container: 1 column (mobile), 2 columns (sm), 3 columns (lg)
    <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      {/* Generate 6 skeleton cards using Array constructor and map */}
      {[...Array(6)].map((_, index) => (
        <div
          key={index}
          className="animate-pulse rounded-lg border border-gray-200 bg-white p-6 shadow-sm"
        >
          {/* Header section with avatar and status indicator */}
          <div className="mb-4 flex items-center justify-between">
            <div className="h-8 w-8 rounded-full bg-gray-200" />{" "}
            {/* Avatar placeholder */}
            <div className="h-6 w-24 rounded-full bg-gray-200" />{" "}
            {/* Status indicator placeholder */}
          </div>

          {/* Title placeholder */}
          <div className="mb-2 h-6 w-3/4 rounded bg-gray-200" />

          {/* Description text placeholders - two lines */}
          <div className="mb-4 space-y-2">
            <div className="h-4 w-full rounded bg-gray-200" />
            <div className="h-4 w-5/6 rounded bg-gray-200" />
          </div>

          {/* Action button placeholder */}
          <div className="h-10 w-full rounded-lg bg-gray-200" />
        </div>
      ))}
    </div>
  );
}