import Image from 'next/image';
import Link from 'next/link';
import Plyr from 'plyr-react';
import { FC, useEffect, useState } from 'react';
import { useTranslation } from 'next-i18next';

import playButton from '@/../public/images/home/play.svg';
import { useRouter } from 'next/router';
import classNames from 'classnames';

interface VideoBannerProps {
  src?: string;

}

const VideoBanner: React.FC<VideoBannerProps> = ({ src }) => {

  const router = useRouter();
  const { t } = useTranslation('common');

  return (
    <section id="video-seccion" className="tw-relative tw-bg-main-light">
      <div className="container ">
        <div className="col-12 col-md-10 offset-md-1 tw-grid tw-gap-4">
          {' '}
          <Plyr
            options={{
              loadSprite: true,
              clickToPlay: true,
              autoplay: false,
              muted: true,
              volume: 0
              /*  loop: { active: true },
          tooltips: { controls: false },
          hideControls: true,
          controls: [],
        */
            }}
            source={{ type: 'video', sources: [{ src: src || '/videos/home.mp4' }] }}
          />
        </div>
      </div>
    </section>
  );
};

export default VideoBanner;