import React from 'react';
import './PricingPlanCard.css';
import '../tarif_head_automatic_files/detail.css';
import './det_PricingPlanCard.css';

const PricingPlanCard = (props) => {
  return (
    <div>


      {!props.isPopular && !props.is_connected && <div className='tarif_head_automatic_files'>
        <div className={`pricing-card ${props.isHighlighted ? 'mysy_highlighted' : ''}`}>

          <div className="det_pricing-content">
            <div className="det_plan-header">
              <h2 className="det_plan-title">{props.title} </h2>
              <p className="det_plan-subtitle">Sans engagement </p>
            </div>

            <div className="det_price-container">
              <div className="det_price-wrapper">
                <span className="det_price">{props.price} €</span>
                <span className="det_price-period">par mois</span>
              </div>
              <p className="det_sessions" style={{fontWeight:'600', fontSize:'13px', color:'#0aa690'}}> {props.sessions} </p>
            </div>

            <button className="det_choose-plan-btn" onClick={(e) => {
              e.preventDefault();
              window.location.href = "/Partner";
            }}>
              <span>Choisir ce plan</span>
            </button>
          </div>
        </div>
      </div>}

      {props.is_connected && <div className='tarif_head_automatic_files'>
        <div className={`pricing-card ${props.isHighlighted ? 'mysy_highlighted' : ''}`}>

          <div className="det_pricing-content">
            <div className="det_plan-header">
              <h2 className="det_plan-title">{props.title} </h2>
              <p className="det_plan-subtitle">Sans engagement</p>
            </div>

            <div className="det_price-container">
              <div className="det_price-wrapper">
                <span className="det_price">{props.price} €</span>
                <span className="det_price-period">par mois </span>
              </div>
              <p className="det_sessions">{props.sessions}</p>
            </div>

           
            {String(props.current_pack).toLowerCase() === String(props.title).toLowerCase() && props.end_date_abonnement && String(props.end_date_abonnement).length > 3 &&
              <div className="det_abonnement">
                <button className="det_choose-plan-btn"
                  color="success"
                  //  className="det_btn_arret_abonnement"
                  style={{ width: '100%', fontFamily: 'DM Sans' }}
                  onClick={(e) => {
                    alert("GOLD")
                    // confirmSTOPAbonnement("Gold");
                  }}
                > Arrêt le {props.end_date_abonnement}  </button>
              </div>}

            {String(props.current_pack).toLowerCase() === String(props.title).toLowerCase() && (!props.end_date_abonnement || String(props.end_date_abonnement).length <= 3) &&
              <div className="det_abonnement">
                <button className="det_choose-plan-btn"
                  color="success"
                  style={{
                    background: "#0aa690", width: '100%', fontFamily: 'DM Sans',
                    color: '#FFF', fontWeight: '600', cursor:'default'
                  }}
                 
                > Votre plan </button>
              </div>}

 
            {String(props.current_pack).toLowerCase() !== String(props.title).toLowerCase() &&
              <div className="det_abonnement">
                <button className="det_choose-plan-btn"
                  color="success"
                  style={{ width: '100%', fontFamily: 'DM Sans' }}
                  //  className="det_btn_arret_abonnement"
                  onClick={(e) => {
       
                    props.confirmAbonnement(String(props.title));
                  }}
                > Choisir ce plan  </button>
              </div>}
          
          </div>
        </div>
      </div>}

    </div>
  );
};

export default PricingPlanCard;

