import React from 'react';
import { ClipboardCheck, X } from 'lucide-react';
import { Modal } from '../Modal';
import { Button } from '../Button';

interface QualityPromptDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onConfigureNow: () => void;
  onConfigureLater: () => void;
  recipeName: string;
}

/**
 * QualityPromptDialog - Prompts user to configure quality checks after creating a recipe
 */
export const QualityPromptDialog: React.FC<QualityPromptDialogProps> = ({
  isOpen,
  onClose,
  onConfigureNow,
  onConfigureLater,
  recipeName
}) => {
  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title="Configurar Control de Calidad"
      size="md"
    >
      <div className="space-y-4">
        <div className="flex items-start gap-4">
          <div className="flex-shrink-0">
            <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
              <ClipboardCheck className="w-6 h-6 text-blue-600" />
            </div>
          </div>
          <div className="flex-1">
            <h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
              ¡Receta creada exitosamente!
            </h3>
            <p className="text-[var(--text-secondary)] mb-4">
              La receta <strong>{recipeName}</strong> ha sido creada.
              Para asegurar la calidad durante la producción, te recomendamos configurar
              los controles de calidad ahora.
            </p>
            <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
              <h4 className="text-sm font-medium text-blue-900 mb-1">
                ¿Qué son los controles de calidad?
              </h4>
              <p className="text-sm text-blue-700">
                Definir qué verificaciones se deben realizar en cada etapa del proceso de producción
                (mezclado, fermentación, horneado, etc.) utilizando plantillas de control de calidad
                reutilizables.
              </p>
            </div>
          </div>
        </div>

        <div className="flex gap-3 pt-4 border-t border-[var(--border-primary)]">
          <Button
            variant="outline"
            onClick={onConfigureLater}
            className="flex-1"
          >
            Más Tarde
          </Button>
          <Button
            variant="primary"
            onClick={onConfigureNow}
            className="flex-1"
          >
            Configurar Ahora
          </Button>
        </div>
      </div>
    </Modal>
  );
};

export default QualityPromptDialog;
