import { FC } from "react";
import { getTypeOfVideo } from '@/lib/utils';
import styles from './main-video.module.scss';

interface MainVideo {
  title?: string;
  description?: string;
  videoLink: string;
  lower: string;
};

const MainVideoComponent: FC<MainVideo> = ({ title, description, videoLink, lower }) => {
  const { isYoutube, isVimeo, videoId } = getTypeOfVideo(videoLink);
 
  return (
    <div className={styles.mainVideo}>
      <div className={styles.videoWrapper}>
        {title && <h1 className={styles.videoTitle}>{title}</h1>}
        {description && <p className={styles.description}>{description}</p>}
        {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>}
        {lower && <span className={styles.lower}>{lower}</span>}
      </div>
    </div>
  );
};

export default MainVideoComponent;