import React from 'react';

type Variant = 'image-with-text__card--no-card' | 'image-with-text__card--full-img';

interface ImageWithTextCardProps {
  variant?: Variant;
  reverse?: boolean;
  imageSrc: string;
  imageAlt: string;
  title: string;
  activityTitle: string;
  activityText: string;
  detailsTitle: string;
  detailsText: string;
  buttonText: string;
  onButtonClick?: () => void;
}

const ImageWithTextCard: React.FC<ImageWithTextCardProps> = ({
  variant,
  reverse,
  imageSrc,
  imageAlt,
  title,
  activityTitle,
  activityText,
  detailsTitle,
  detailsText,
  buttonText,
  onButtonClick
}) => (
  <div className={`image-with-text__card ${reverse ? 'image-with-text__card--reverse' : ''} ${variant ? variant.toString() : ''}`}>
    <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">{activityTitle}</h5>
        <p className="image-with-text__card__description__text">{activityText}</p>
      </div>

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

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

interface ImageWithTextSectionProps {
  variant?: Variant;
  sectionTitle: string;
  hasBackground?: boolean;
  cards: [Omit<ImageWithTextCardProps, 'reverse'>, Omit<ImageWithTextCardProps, 'reverse'>];
}

export const ImageWithTextSection: React.FC<ImageWithTextSectionProps> = ({ variant, sectionTitle, hasBackground = true, cards }) => {
  const className = ['image-with-text', hasBackground && 'image-with-text--background'].filter(Boolean).join(' ');
  return (
    <div className={className}>
      <div className="image-with-text__container">
        <div className="image-with-text__title__row">
          <h2 className="image-with-text__title">{sectionTitle}</h2>
        </div>

        <div className="image-with-text__card__wrapper">
          <ImageWithTextCard {...cards[0]} variant={variant} />
          <ImageWithTextCard {...cards[1]} reverse variant={variant} />
        </div>
      </div>
    </div>
  );
};

interface ImageWithTextProps {
  sectionTitle?: string;
  variants?: Variant[];
  hasBackground?: boolean;
}

const DEFAULT_IMAGE = 'https://images.pexels.com/photos/3264723/pexels-photo-3264723.jpeg?cs=srgb&dl=pexels-alexazabache-3264723.jpg&fm=jpg';

export const ImageWithText: React.FC<ImageWithTextProps> = ({ sectionTitle = 'Activities', variants, hasBackground = true }) => {
  const baseCard = {
    imageSrc: DEFAULT_IMAGE,
    imageAlt: 'eiland',
    title: 'Ontdek het zonnige Santorini',
    activityTitle: 'Your activity',
    activityText:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non sollicitudin risus. Donec euismod metus et purus ultricies condimentum. Vestibulum vel sodales massa. Pellentesque bibendum nisl at hendrerit sagittis. Pellentesque eget dui scelerisque, dictum diam non, ultrices velit. Duis et sem est. Suspendisse potenti.',
    detailsTitle: 'Details',
    detailsText:
      'Etiam ipsum elit, volutpat sed semper at, eleifend vitae erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In at lectus rutrum elit egestas consectetur. Suspendisse sit amet erat dapibus, tincidunt arcu fringilla, auctor justo.',
    buttonText: 'Book now'
  } as const;

  if (!variants || variants.length === 0) {
    return <ImageWithTextSection sectionTitle={sectionTitle} cards={[baseCard, baseCard]} />;
  }

  return (
    <>
      {variants.map((variant) => (
        <ImageWithTextSection key={variant} variant={variant} sectionTitle={sectionTitle} hasBackground={hasBackground} cards={[baseCard, baseCard]} />
      ))}
    </>
  );
};

export default ImageWithText;