import classNames from 'classnames';
import React, { FC, ReactType, ReactNode } from 'react';

import css from './index.module.css';

export interface CarouselTextImageProps {
  Image?: ReactType;
  ImageProps?: {
    title?: string;
    description?: string;
    svg?: {
      absolutePath?: string;
      content?: string;
      dataURI?: string;
      originalContent?: string;
      relativePath?: string;
    };
    file?: {
      contentType?: string;
      url?: string;
      fileName?: string;
      details?: {
        image?: {
          width?: string;
          height?: string;
        };
      };
    };
    fluid?: unknown;
  };
  title: string;
  text?: ReactNode;
  imagePosition?: string;
  contentAlignment?: string;
  isSvgImage?: boolean;
}

const CarouselTextImage: FC<CarouselTextImageProps> = ({
  Image,
  ImageProps = {},
  imagePosition = 'Top',
  contentAlignment = 'Left',
  title,
  text,
  isSvgImage = false,
}) => {
  imagePosition = imagePosition ? imagePosition : 'Top';
  contentAlignment = contentAlignment ? contentAlignment : 'Left';

  const textImageClassNames = classNames(css.textImage, {
    [`${css[`textImage${`Image${imagePosition}`}`]}`]: imagePosition,
    [`${css[`textImage${`Content${contentAlignment}`}`]}`]: contentAlignment,
  });

  return (
    <div className={css.textImage__wrap}>
      <div className={textImageClassNames}>
        {!isSvgImage && Image && ImageProps && (
          <Image className={css.textImage__image} {...ImageProps} />
        )}
        {isSvgImage && ImageProps && ImageProps.svg && (
          <div
            dangerouslySetInnerHTML={{ __html: ImageProps.svg.content }}
            className={css.textImage__image}
          />
        )}
        <div className={css.textImage__content}>
          <h3 className={css.textImage__title}>{title}</h3>
          <div className={'lead-2'}>{text}</div>
        </div>
      </div>
    </div>
  );
};

export default CarouselTextImage;