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

const TrainingHosting = ({ style }) => {
  return (
    <div className="training-hosting" style={style}>
      <div className="title-column">
        <div className="header-row">
          <span className="header-text">Hébergement de formations (LMS)</span>
        </div>
        <div className="content-row">
          <span className="content-text">
            Intranet personnalisé avec mise en place d'un site web (intranet) personnalisé.
          </span>
        </div>
        <div className="content-row">
          <span className="content-text">Nom de domaine personnalisé</span>
        </div>
        <div className="content-row">
          <span className="content-text">
            Personnalisation de la charte graphique
            (couleurs & bannière)
          </span>
        </div>
      </div>

      <div className="price-column">
        <div className="price-header">
          <img src="https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/04-3.png" alt="Price 04" className="price-image" />
        </div>
        <div className="price-content">
          <div className="circle-container">
            <div className="gray-circle">
              <img src="/img/market_place_img_no_check.png" alt="Add" className="icon" />
            </div>
          </div>
        </div>
        <div className="price-content">
          <div className="circle-container">
            <div className="green-circle">
              <img src="/img/market_place_img_check.png" alt="Check" className="check-icon" />
            </div>
          </div>
        </div>
      </div>

      <div className="price-column">
        <div className="price-header">
          <img src="https://dashboard.codeparrot.ai/api/image/Z5OupHhIZI-ZK8k9/16-3.png" alt="Price 16" className="price-image" />
        </div>
        <div className="price-content">
          <div className="circle-container">
            <div className="gray-circle">
              <img src="/img/market_place_img_no_check.png" alt="Add" className="icon" />
            </div>
          </div>
        </div>
        <div className="price-content">
          <div className="circle-container">
            <div className="green-circle">
              <img src="/img/market_place_img_check.png" alt="Check" className="check-icon" />
            </div>
          </div>
        </div>
      </div>

      <div className="price-column">
        <div className="price-header">
          <span className="dropdown-container">
            <img src="/img/market_place_img_arrow1.png" alt="Dropdown" className="dropdown-icon" />
          </span>
        </div>
        <div className="price-content">
          <div className="circle-container">
            <div className="green-circle">
              <img src="/img/market_place_img_check.png" alt="Check" className="check-icon" />
            </div>
          </div>
        </div>
        <div className="price-content">
          <div className="circle-container">
            <div className="green-circle">
              <img src="/img/market_place_img_check.png" alt="Check" className="check-icon" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

TrainingHosting.defaultProps = {
  style: {}
};

export default TrainingHosting;

