import React from 'react';
import Icon from '../../../shared/components/icon';

const FlightOptionModal = ({}) => {
  return (
    <div className="flight__rate__modal__container">
      {' '}
      {/* add "flight__rate__modal__container--active" to show modal */}
      <div className="flight__rate__modal">
        <div className="flight__rate__modal__header">
          <h3 className="flight__rate__modal__header__title">Selecteer een tarief</h3>
          <button className="flight__rate__modal__header__close">
            <Icon name="close" width={18} height={18} />
          </button>
        </div>
        <div className="flight__rate__modal__tabs">
          <button className="flight__rate__modal__tab flight__rate__modal__tab--active">Economy / Economy premium</button>
          <button className="flight__rate__modal__tab">Business / Business premium</button>
        </div>
        <div className="flight__rate__modal__content">
          <div className="flight__rate__modal__card">
            <div className="flight__rate__modal__card__wrapper">
              <div className="flight__rate__modal__card__header">
                <h3 className="flight__rate__modal__card__header__title">Economy Basic</h3>
                <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
              </div>
              <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
                <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
                  <Icon name="ticket" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Wijzigingen in het ticket</strong>
                    <p>Wijzigingen toestaan</p>
                  </div>
                </div>
                <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
                  <Icon name="payback" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Terugbetaling van ticket</strong>
                    <p>Ticket retourneerbaar</p>
                  </div>
                </div>
              </div>
              <div className="flight__rate__modal__card__items">
                <div className="flight__rate__modal__card__item">
                  <Icon name="shopping-bag" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>persoonlijke items</strong>
                    <p>Gratis</p>
                  </div>
                </div>
                <div className="flight__rate__modal__card__item">
                  <Icon name="backpack" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Handbagage</strong>
                    <p>Gratis: 2 x 8kg</p>
                  </div>
                </div>
                <div className="flight__rate__modal__card__item">
                  <Icon name="suitcase" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Ingecheckte bagage</strong>
                    <p>Gratis: 2 x 32kg</p>
                  </div>
                </div>
              </div>
            </div>
            <div className="flight__rate__modal__card__footer">
              <button className="cta cta--secondary">Selecteer</button>
              <span className="price price--increase">+ €2460,00</span>
            </div>
          </div>
          <div className="flight__rate__modal__card flight__rate__modal__card--premium">
            <div className="flight__rate__modal__card__wrapper">
              <div className="flight__rate__modal__card__header">
                <h3 className="flight__rate__modal__card__header__title">Premium Economy Basic Plus</h3>
                <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
              </div>
              <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
                <div className="flight__rate__modal__card__item">
                  <Icon name="ticket" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Wijzigingen in het ticket</strong>
                    <p>Wijzigingen toestaan</p>
                  </div>
                </div>
                <div className="flight__rate__modal__card__item">
                  <Icon name="payback" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Terugbetaling van ticket</strong>
                    <p>Ticket retourneerbaar</p>
                  </div>
                </div>
              </div>
              <div className="flight__rate__modal__card__items">
                <div className="flight__rate__modal__card__item">
                  <Icon name="shopping-bag" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>persoonlijke items</strong>
                    <p>Gratis</p>
                  </div>
                </div>
                <div className="flight__rate__modal__card__item">
                  <Icon name="backpack" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Handbagage</strong>
                    <p>Gratis: 2 x 8kg</p>
                  </div>
                </div>
                <div className="flight__rate__modal__card__item">
                  <Icon name="suitcase" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Ingecheckte bagage</strong>
                    <p>Gratis: 2 x 32kg</p>
                  </div>
                </div>
              </div>
            </div>
            <div className="flight__rate__modal__card__footer">
              <button className="cta cta--secondary">Selecteer</button>
              <span className="price price--increase">+ €2460,00</span>
            </div>
          </div>
          <div className="flight__rate__modal__card flight__rate__modal__card--business">
            <div className="flight__rate__modal__card__wrapper">
              <div className="flight__rate__modal__card__header">
                <h3 className="flight__rate__modal__card__header__title">Business Basic Plus</h3>
                <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
              </div>
              <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
                <div className="flight__rate__modal__card__item">
                  <Icon name="ticket" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Wijzigingen in het ticket</strong>
                    <p>Wijzigingen toestaan</p>
                  </div>
                </div>
                <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
                  <Icon name="payback" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Terugbetaling van ticket</strong>
                    <p>Ticket retourneerbaar</p>
                  </div>
                </div>
              </div>
              <div className="flight__rate__modal__card__items">
                <div className="flight__rate__modal__card__item">
                  <Icon name="shopping-bag" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>persoonlijke items</strong>
                    <p>Gratis</p>
                  </div>
                </div>
                <div className="flight__rate__modal__card__item">
                  <Icon name="backpack" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Handbagage</strong>
                    <p>Gratis: 2 x 8kg</p>
                  </div>
                </div>
                <div className="flight__rate__modal__card__item">
                  <Icon name="suitcase" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Ingecheckte bagage</strong>
                    <p>Gratis: 2 x 32kg</p>
                  </div>
                </div>
                <div className="flight__rate__modal__card__item">
                  <Icon name="seat-selection" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Stoelselectie</strong>
                    <p>kies uw stoel in het vliegtijg</p>
                  </div>
                </div>
                <div className="flight__rate__modal__card__item">
                  <Icon name="check-in" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Sneller inchecken</strong>
                    <p>Sla de wachtrijen voor de veiligheidscontrole over</p>
                  </div>
                </div>
                <div className="flight__rate__modal__card__item">
                  <Icon name="business-lounge" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Zakenlunge</strong>
                    <p>Ontspan voor uw vlucht</p>
                  </div>
                </div>
                <div className="flight__rate__modal__card__item">
                  <Icon name="priority" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Prioriteit</strong>
                    <p>Stap voor anderen aan boord</p>
                  </div>
                </div>
              </div>
            </div>
            <div className="flight__rate__modal__card__footer">
              <button className="cta cta--secondary">Selecteer</button>
              <span className="price price--increase">+ €2460,00</span>
            </div>
          </div>
        </div>
        <div className="flight__rate__modal__footer">
          <button className="cta cta--secondary">Toepassen</button>
        </div>
      </div>
    </div>
  );
};

export default FlightOptionModal;