import { NEXT_PUBLIC_API_URL } from "@/lib/constants";
import { getTypeOfVideo } from "@/lib/utils";
import { FC } from "react";
import styles from './media-list.module.scss';

interface MultimediaType {
  type: 'picture'|'video';
  url?: string;
  id?: string;
  lower?: string;
  image: Record<string, any>;
};

interface MultimediaList {
  title?: string;
  multimedia: MultimediaType[];
}

const MultimediaListComponent: FC<MultimediaList> = ({title, multimedia}) => {
  return(
    <div className={styles.mediaList}>
      {title && <h1 className={styles.title}>{title}</h1>}
      {multimedia && multimedia.length > 0 && <div className="columns is-multiline">
        {multimedia.map((mult, index) => {
          if (mult.type === 'picture') {
            return (
              <div className="column is-6" key={index}>
                <div className={styles.picture}>
                  <img src={`${mult.image.url}`} />
                </div>
              </div>
            );
          } else {
            const { isYoutube, isVimeo, videoId } = getTypeOfVideo(mult.url);

            return (
              <div className="column is-6" key={index}>
                {videoId && <div className={styles.videoContainer}>
                  {videoId && <div className={styles.video}>
                    {isYoutube && <iframe src={`https://www.youtube.com/embed/${videoId}`} height="580" width="100%"></iframe>}
                    {isVimeo && <iframe src={`https://player.vimeo.com/video/${videoId}`} height="580" width="100%"></iframe>}
                  </div>}
                  {mult.lower && <div className={styles.lower}>{mult.lower}</div>}
                </div>}
              </div>
            )
          }
        })}
      </div>}
    </div>
  );
};

export default MultimediaListComponent;