'use client';

import { useMemo } from 'react';
import { Parallax } from 'react-scroll-parallax';
import Container from '@/components/layout/Container';
import { ResponsiveVideo } from '@/components/shared/ResponsiveVideo';
import ResponsiveImage from '@/components/shared/ResponsiveImage';


const VideoContent: React.FC<IVideoContent> = ({
  title,
  videoSet,
  imageSet,
  description
}) => {
  const className = 'mx-auto max-w-full min-h-60 object-cover';

  const imageFallback = useMemo(
    () => (
      <ResponsiveImage
        src={imageSet?.portrait.url}
        width={imageSet?.portrait.width}
        height={imageSet?.portrait.height}
        sizes="100vw"
        className={className}>
        <ResponsiveImage.Source
          media="xxl"
          src={imageSet?.landscape.url}
          width={imageSet?.landscape.width}
          height={imageSet?.landscape.height}
          sizes="(max-width: 1920px) 100vw, 1920px"
        />
      </ResponsiveImage>
    ),
    [imageSet]
  );

  return (
    <section className="pt-6 dark bg-default-50 text-foreground">
      <Parallax translateY={[20, -20]}>
        <Container as="header" className="text-center mb-6 md:mb-8">
          <h2 className="text-3xl font-serif mb-6 md:text-6xl">{title}</h2>
          <p className="text-sm font-light max-w-screen-md mx-auto md:text-base">
            {description}
          </p>
        </Container>
      </Parallax>

      <div className="relative overflow-hidden">
        <Parallax translateY={[-30, 30]} className="relative overflow-hidden">
          {videoSet ? (
            <ResponsiveVideo
              src={videoSet?.portrait.url}
              srcSet={
                videoSet && [{ src: videoSet.landscape.url, media: 'sm' }]
              }
              className={className}
              autoPlayFallback={imageFallback}
              playsInline
              autoPlay
              muted
              loop
            />
          ) : (
            imageFallback
          )}
        </Parallax>
      </div>
    </section>
  );
};

export default VideoContent;
