'use client';

/**
 * RefinementIndicator Component
 *
 * Story 2.3: Loading state during draft regeneration
 *
 * Displays a loading indicator while the Ghostwriter is regenerating
 * the draft based on user feedback.
 *
 * Features:
 * - Matches the DraftingIndicator styling
 * - Shows "Refining..." message
 * - Accessible with proper ARIA labels
 */

interface RefinementIndicatorProps {
  message?: string;
}

export function RefinementIndicator({ message = "Refining your draft..." }: RefinementIndicatorProps) {
  return (
    <div
      className="flex items-center gap-2 text-sm text-slate-600 bg-slate-50 px-4 py-2 rounded-lg"
      role="status"
      aria-live="polite"
      aria-busy="true"
    >
      {/* Animated dots */}
      <div className="flex gap-1">
        <span className="w-2 h-2 bg-slate-400 rounded-full animate-pulse" aria-hidden="true" />
        <span className="w-2 h-2 bg-slate-400 rounded-full animate-pulse delay-100" aria-hidden="true" />
        <span className="w-2 h-2 bg-slate-400 rounded-full animate-pulse delay-200" aria-hidden="true" />
      </div>
      <span>{message}</span>
    </div>
  );
}
