"use client";

interface AISuggestionPreviewProps {
  original: string;
  suggestion: string;
  onAccept: (text: string) => void;
  onDismiss: () => void;
}

export function AISuggestionPreview({ original, suggestion, onAccept, onDismiss }: AISuggestionPreviewProps) {
  return (
    <div className="rounded-lg border border-green-200 bg-green-50 p-3 space-y-3">
      <p className="text-xs font-medium text-green-700">AI Suggestion</p>
      <div className="space-y-2">
        <p className="text-sm text-gray-400 line-through">{original}</p>
        <p className="text-sm text-gray-900">{suggestion}</p>
      </div>
      <div className="flex gap-2">
        <button
          type="button"
          onClick={() => onAccept(suggestion)}
          className="rounded-md bg-green-600 px-3 py-1 text-xs font-medium text-white hover:bg-green-700 transition-colors"
        >
          Accept
        </button>
        <button
          type="button"
          onClick={onDismiss}
          className="rounded-md border border-gray-200 bg-white px-3 py-1 text-xs font-medium text-gray-600 hover:bg-gray-50 transition-colors"
        >
          Dismiss
        </button>
      </div>
    </div>
  );
}