import React from 'react';
import { ImageWithTextCardProps } from './types';

const ImageWithTextCard: React.FC<ImageWithTextCardProps> = ({
  noCard,
  fullImage,
  reverse,
  imageSrc,
  imageAlt,
  title,
  section1Title,
  section1Text,
  section2Title,
  section2Text,
  buttonText,
  onButtonClick
}) => {
  let cardClassName = 'image-with-text__card';
  if (noCard) {
    cardClassName += ' image-with-text__card--no-card';
  }
  if (fullImage) {
    cardClassName += ' image-with-text__card--full-img';
  }
  if (reverse) {
    cardClassName += ' image-with-text__card--reverse';
  }

  return (
    <div className={cardClassName}>
      <div className="image-with-text__card__image__wrapper">
        <img src={imageSrc} alt={imageAlt} className="image-with-text__card__image" />
      </div>

      <div className="image-with-text__card__content">
        <h3 className="image-with-text__card__title">{title}</h3>

        <div className="image-with-text__card__description">
          <h5 className="image-with-text__card__description__title">{section1Title}</h5>
          <p className="image-with-text__card__description__text">{section1Text}</p>
        </div>

        <div className="image-with-text__card__description">
          <h5 className="image-with-text__card__description__title">{section2Title}</h5>
          <p className="image-with-text__card__description__text">{section2Text}</p>
        </div>

        <div className="image-with-text__card__btn">
          <button type="button" className="cta cta--select" onClick={onButtonClick}>
            {buttonText}
          </button>
        </div>
      </div>
    </div>
  );
};

export default ImageWithTextCard;