/**
 * DraftingIndicator Component
 *
 * Displays a distinct animation when the Ghostwriter Agent is generating a draft.
 * Uses a skeleton/shimmer pattern different from the typing indicator.
 *
 * UX Design:
 * - "Skeleton card loader" (shimmering lines) to show work is happening
 * - Different from "Teacher is typing..." dots
 * - Text: "Drafting your post..." or "Polishing your insight..."
 */

import { useChatStore } from '../../../lib/store/chat-store';

export function DraftingIndicator() {
  const isDrafting = useChatStore((s) => s.isDrafting);

  if (!isDrafting) {
    return null;
  }

  return (
    <div className="flex items-center gap-2 px-4 py-2 text-sm text-muted-foreground">
      {/* Shimmering skeleton animation */}
      <div className="flex gap-1">
        <span className="w-2 h-2 bg-foreground/20 rounded-full animate-pulse" />
        <span className="w-2 h-2 bg-foreground/20 rounded-full animate-pulse delay-75" />
        <span className="w-2 h-2 bg-foreground/20 rounded-full animate-pulse delay-150" />
      </div>
      <span className="animate-pulse">Drafting your post...</span>
    </div>
  );
}
