'use client';

/**
 * RefinementModeBadge Component
 *
 * Story 2.3: Visual indicator for refinement mode
 *
 * Displays a badge at the top of the chat interface when the user is
 * in refinement mode, indicating they're providing feedback to improve
 * their draft.
 *
 * Features:
 * - Amber/yellow theme to indicate "work in progress"
 * - Cancel button to exit refinement mode
 * - Accessible with proper ARIA labels
 * - Keyboard accessible cancel button
 */

interface RefinementModeBadgeProps {
  onCancel: () => void;
}

export function RefinementModeBadge({ onCancel }: RefinementModeBadgeProps) {
  return (
    <div
      className="flex items-center gap-2 px-3 py-2 bg-amber-50 border border-amber-200 rounded-full text-sm text-amber-800 mx-4 mt-4"
      role="status"
      aria-live="polite"
      aria-label="Refinement mode active"
    >
      <span className="flex-1">Refining your draft...</span>
      <button
        onClick={onCancel}
        type="button"
        className="text-amber-600 hover:text-amber-800 underline text-xs font-medium"
        aria-label="Cancel refinement"
      >
        Cancel
      </button>
    </div>
  );
}
