import React from 'react';
import { Button, Card, Row, Col } from 'react-bootstrap';

interface ActionButtonsProps {
    onShowCupsElectricosModal: () => void;
    onShowCupsGasModal: () => void;
    onGuardarContrato: (e: any) => void;
    isProcessing: boolean;
    hasElectricRows: boolean;
    hasGasRows: boolean;
    isFormValid: boolean;
}

const ActionButtons: React.FC<ActionButtonsProps> = ({
    onShowCupsElectricosModal,
    onShowCupsGasModal,
    onGuardarContrato,
    isProcessing,
    hasElectricRows,
    hasGasRows,
    isFormValid
}) => {
    return (
        <Card>
            <Card.Body>
                <Row className="g-3">
                    <Col md={4}>
                        <div className="d-grid">
                            <Button
                                variant="success"
                                size="lg"
                                onClick={onGuardarContrato}
                                disabled={isProcessing || !isFormValid}
                            >
                                {isProcessing ? (
                                    <>
                                        <span
                                            className="spinner-border spinner-border-sm me-2"
                                            role="status"
                                            aria-hidden="true"
                                        ></span>
                                        Guardando...
                                    </>
                                ) : (
                                    <>
                                        <i className="fas fa-save me-2"></i>
                                        Guardar Contrato
                                    </>
                                )}
                            </Button>
                        </div>
                        {!isFormValid && (
                            <small className="text-danger mt-1 d-block">
                                <i className="fas fa-exclamation-triangle me-1"></i>
                                Complete todos los campos requeridos
                            </small>
                        )}
                    </Col>
                </Row>

                <Row className="mt-4">
                    <Col>
                        <div className="alert alert-info">
                            <h6 className="alert-heading">
                                <i className="fas fa-info-circle me-2"></i>
                                Instrucciones
                            </h6>
                            <ul className="mb-0">
                                <li>Complete los datos del cliente en la sección superior</li>
                                <li>Agregue los CUPS eléctricos y/o de gas según corresponda</li>
                                <li>Configure las comercializadoras, productos y tarifas para cada CUPS</li>
                                <li>Verifique que todos los campos estén completos antes de guardar</li>
                            </ul>
                        </div>
                    </Col>
                </Row>
            </Card.Body>
        </Card>
    );
};

export default ActionButtons;