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

interface SecondaryVideo {
  title?: string;
  description?: string;
  videoLink: string;
  lower: string;
  videoSize?: 'large' | 'small';
};

const SecondaryVideoComponent: FC<SecondaryVideo> = ({ title, description, videoLink, lower, videoSize }) => {
  const [mediaType, setMediaType] = useState('');
  const { isYoutube, isVimeo, videoId } = getTypeOfVideo(videoLink);

  useEffect(() => {
    if (videoSize === 'large') 
      setMediaType('is-9-desktop is-12-tablet');
    else
      setMediaType('is-6-desktop is-12-tablet');
  }, [videoSize]);

  return (
    <div className={styles.secondaryVideo}>
      <div className="columns is-multiline">
        <div className="column is-offset-0-desktop is-3-desktop is-offset-5-tablet is-7-tablet">
          {(title || description) && <div className={styles.titleContainer}>
            {title && <h2 className={styles.title}>{title}</h2>}
            {description && <p className={styles.description}>{description}</p>}
          </div>}
        </div>
        {videoId && <div className={`column ${mediaType}`}>
          <div className={styles.video}>
            {isYoutube && <iframe src={`https://www.youtube.com/embed/${videoId}`}></iframe>}
            {isVimeo && <iframe src={`https://player.vimeo.com/video/${videoId}`}></iframe>}
          </div>
          <span className={styles.lower}>{lower}</span>
        </div>}
      </div>
    </div>
  );
};

SecondaryVideoComponent.defaultProps = {
  videoSize: 'large'
};

export default SecondaryVideoComponent;