'use client'

import React from 'react';

import style from './PlyrJS.module.scss'

import { VideoData } from '@/meta/data';

import "plyr-react/plyr.css"

import dynamic from 'next/dynamic';

interface Props {
    data: VideoData
}

const PlyrJS: React.FC<Props> = (props) => {


    const PlyrComponent = React.useMemo(() => {
        return dynamic(() => import("plyr-react"), { ssr: false });
    }, []);

    //   const Plyr = dynamic(() => import("plyr-react"), { ssr: false });

    const { data } = props;

    const plyrProps = {
        source: { type: 'video', sources: data.srcSet }, // https://github.com/sampotts/plyr#the-source-setter
        options: {
            controls: [
                'play', // Play/pause playback
                'progress', // The progress bar and scrubber for playback and buffering
                'current-time', // The current time of playback
                'duration', // The full duration of the media
                'mute', // Toggle mute
                'volume', // Volume control
                'captions', // Toggle captions
                'settings', // Settings menu
                'fullscreen', // Toggle fullscreen
            ]
        }, // https://github.com/sampotts/plyr#options
    }

    return (
        <div className={style.container}>
            {/* @ts-ignore */}
            <PlyrComponent {...plyrProps} />
        </div>
    );
};

export default PlyrJS;