import React from 'react';
import moment from "moment";
import './CallToActionSection.css';
import { useHistory } from "react-router-dom";

const CallToActionSection = ({ title, demoButtonText, contactText }) => {
  const history = useHistory();


  return (
    <div className="footer_automatic_files">
      <div className="cta-section">
        <h1 className="cta-title">
          {title.split('\n').map((line, index) => (
            <React.Fragment key={index}>
              {line}
              <br />
            </React.Fragment>
          ))}
        </h1>
        <div className="cta-buttons">
          <button className="cta-demo-button"
            onClick={(e) => {
              e.preventDefault();
              var date2 = new Date();
              const format2 = "YYYY-MM";
              var dateTime2 = moment(date2).format(format2);
              window.open(
                "https://calendly.com/mysytraining/demo-mysy-training-solution?month=" + String(dateTime2),
                '_blank'
              );
            }}>
            <span className="button-text">{demoButtonText}</span>
          </button>
          <div className="cta-contact-link" onClick={(e) => {
            e.preventDefault();
            window.open("/contact/#debut", "_self");
          }}>
            <span>{contactText}</span>
          </div>
        </div>
      </div>
    </div>
  );
};

CallToActionSection.defaultProps = {
  title: 'Découvrez une nouvelle façon de travailler\navec Mysy Training.',
  demoButtonText: 'Demander une démo gratuite',
  contactText: "Contactez-nous pour plus d'informations"
};

export default CallToActionSection;

