frontend/src/components/TranscriptionWarningModal.tsx

import React from 'react';
import { WARNING_MESSAGES } from '../utils/transcriptionWarnings';

type WarningType = keyof typeof WARNING_MESSAGES;

interface TranscriptionWarningModalProps {
  isOpen: boolean;
  warnings: WarningType[];
  onAccept: () => void;
  onCancel: () => void;
}

const TranscriptionWarningModal: React.FC<TranscriptionWarningModalProps> = ({
  isOpen,
  warnings,
  onAccept,
  onCancel,
}) => {
  if (!isOpen || warnings.length === 0) {
    return null;
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
      <div className="bg-gray-800 rounded-lg shadow-xl max-w-lg w-full mx-4 border border-gray-600">
        <div className="p-6">

          {/* Warning Messages */}
          <div className="space-y-4 mb-6">
            {warnings.map((warningType) => {
              const warning = WARNING_MESSAGES[warningType];
              return (
                <div
                  key={warningType}
                  className="p-4 rounded-lg border-l-4 bg-orange-900/20 border-orange-500"
                >
                  <h4 className="font-medium text-sm text-orange-300">
                    {warning.title}
                  </h4>
                  <p className="text-sm text-gray-300 mt-1">
                    {warning.message}
                  </p>
                </div>
              );
            })}
          </div>

          {/* Actions */}
          <div className="flex flex-col sm:flex-row gap-3 justify-end">
            <button
              onClick={onCancel}
              className="px-4 py-2 text-sm font-medium text-gray-300 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors"
            >
              Cancel
            </button>
            <button
              onClick={onAccept}
              className="px-4 py-2 text-sm font-medium text-white bg-orange-600 hover:bg-orange-700 rounded-lg transition-colors"
            >
              Proceed Anyway
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TranscriptionWarningModal;