import React from 'react';
import './PriceCard.css';

import check_img_fond_blanc from "../../img_new_design_2025/check-2.svg";

const PriceCard = ({
  isPopular = false,
  title = 'BASIQUE',
  price = '9.99',
  features = [
    'Sans engagement',
    '2 Utilisateurs maximum',
    'Email Support',
    "Jusqu'à 25 Sessions/an",
    'Basic Analytics'
  ],
  buttonColor = '#fff',
  buttonTextColor = '#4b5162',
  priceColor = '#16274f',
  borderColor = '#c7c9ce'
}) => {
  return (
    <div className='pricecard'>
      {isPopular && <div className="price-card-wrapper">
        {isPopular && (
          <div className="popular-badge">
            <span>LE PLUS POPULAIRE</span>
          </div>
        )}
        <div
          className="price-card"
          style={{
            borderColor: isPopular ? '#0aa690' : borderColor,
            borderTop: 'none',
            borderTopLeftRadius: '0px',
            borderTopRightRadius: '0px',
            borderTopColor: '#0aa690',
            minHeight: '620px'
          }}
        >
          <div className="text-content">
            <span className="plan-title">{title}</span>
            <div className="price-container">
              <span className="price" style={{ color: isPopular ? '#0aa690' : priceColor }}>
                {price} €
              </span>
              <span className="per-month" style={{ color: isPopular ? '#0aa690' : priceColor }}>
                par mois
              </span>
            </div>
            <span className="engagement">Sans engagement</span>
          </div>

          <button
            className="start-button"
            style={{
              backgroundColor: buttonColor,
              color: buttonTextColor,
              borderColor: isPopular ? '#0aa690' : borderColor
            }}
            onClick={(e) => {
              e.preventDefault();
              window.location.href = "/Partner";
            }}
          >
            Commencer maintenant
          </button>

          <div className="divider" />

          <div className="features-list">
            {features.map((feature, index) => (
              <div key={index} className="feature-item">
                <img
                  src={check_img_fond_blanc}
                  alt="check"
                  className="check-icon"
                />
                {String(feature.hilight) === "1" && <span className="feature-text" style={{fontWeight:'700', fontSize:'14px'}}>{feature.text}</span>}
                {String(feature.hilight) !== "1" && <span className="feature-text">{feature.text}</span>}
              </div>
            ))}
          </div>
        </div>
      </div>}

      {!isPopular && <div className="price-card-wrapper">
        <div
          className="price-card"
          style={{
            borderColor: isPopular ? '#0aa690' : borderColor
          }}
        >
          <div className="text-content">
            <span className="plan-title">{title}</span>
            <div className="price-container">
              <span className="price" style={{ color: isPopular ? '#0aa690' : priceColor }}>
                {price} €
              </span>
              <span className="per-month" style={{ color: isPopular ? '#0aa690' : priceColor }}>
                par mois
              </span>
            </div>
            <span className="engagement">Sans engagement</span>
          </div>

          <button
            className="start-button"
            style={{
              backgroundColor: buttonColor,
              color: buttonTextColor,
              borderColor: isPopular ? '#0aa690' : borderColor
            }}
            onClick={(e) => {
              e.preventDefault();
              window.location.href = "/Partner";
            }}
          >
            Commencer maintenant
          </button>

          <div className="divider" />

          <div className="features-list">
            {features.map((feature, index) => (
              <div key={index} className="feature-item">
                <img
                  src={check_img_fond_blanc}
                  alt="check"
                  className="check-icon"
                />
                {String(feature.hilight) === "1" && <span className="feature-text" style={{fontWeight:'700', fontSize:'14px'}}>{feature.text}</span>}
                {String(feature.hilight) !== "1" && <span className="feature-text">{feature.text}</span>}
              </div>
            ))}
          </div>
        </div>
      </div>}
    </div>
  );
};

export default PriceCard;

