import React, { FC, ReactType } from 'react';
import css from './index.module.css';
import DefaultImage, { ImageProps } from '../../blocks/Image';

export interface FeaturedPartnersProps {
  title?: string;
  items?: {
    name: string;
    Image: ReactType;
    ImageProps: ImageProps;
  }[];
}

const FeaturedPartners: FC<FeaturedPartnersProps> = ({ items, title }) => {
  return (
    <div className={css.featuredPartners}>
      <div className={css.featuredPartners__wrap}>
        <div className={css.featuredPartners__partners}>
          {title && <div className={css.featuredPartners__title}>{title}</div>}
          {items &&
            items.map(item => {
              const Image = item.Image || DefaultImage;
              const isSvgImage =
                item.ImageProps.file.contentType === 'image/svg+xml';
              return (
                <div key={item.name} className={css.featuredPartners__image}>
                  {!isSvgImage && <Image {...item.ImageProps} />}
                  {isSvgImage && (
                    <div
                      dangerouslySetInnerHTML={{
                        __html: item.ImageProps.svg.content,
                      }}
                    />
                  )}
                </div>
              );
            })}
        </div>
      </div>
    </div>
  );
};

export default FeaturedPartners;