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

const ImageCardGrid: React.FC<ImageCardGridProps> = ({ title, cards, columns }) => {
  const columnsModifier = `content__colums content__colums--${columns}`;

  return (
    <div className="content">
      <div className="content__container">
        <div className="content__title__row">
          <h2 className="content__title">{title}</h2>
        </div>
        <div className={columnsModifier}>
          {cards.map((card, index) => (
            <div className="text-in-image" key={index}>
              <img src={card.image} alt={card.title} className="text-in-image__image" />
              <div className="text-in-image__content">
                <h3 className="text-in-image__title">{card.title}</h3>
                <p className="text-in-image__description">{card.description}</p>
                {card.buttonText && (
                  <button onClick={() => card.onButtonClick?.(card)} className="cta cta--select text-in-image__btn">
                    {card.buttonText}
                  </button>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default ImageCardGrid;