import React from 'react';

import { getTwitchEmbedUrl } from './util';

export type VideoHighlightSectionProps = {
  headline: string;
  subheader?: string;
  videoSrc: string;
  poster?: string;
  className?: string;
  autoPlay?: boolean;
  muted?: boolean;
  loop?: boolean;
  staffOnlyText?: string; // optional red notice when section is staff-only
};

const VideoHighlightSection: React.FC<VideoHighlightSectionProps> = ({
  headline,
  subheader,
  videoSrc,
  poster,
  className,
  autoPlay = true,
  muted = true,
  loop = true,
  staffOnlyText,
}) => {
  const embedUrl = getTwitchEmbedUrl(videoSrc, autoPlay, muted);
  const isEmbed = embedUrl !== null;

  return (
    <section className={`w-full px-6 py-24 md:py-[100px] ${className ?? ''}`}>
      {staffOnlyText && (
        <div className='mb-6 text-center text-sm font-medium text-accent-pink-on-primary'>
          {staffOnlyText}
        </div>
      )}
      <div className='mx-auto flex max-w-[2560px] flex-col-reverse items-center gap-8 md:flex-row md:items-center md:gap-12'>
        <div className='w-full md:order-2 md:w-1/2'>
          <div className='relative w-full overflow-hidden rounded-2xl bg-black'>
            {isEmbed ? (
              <iframe
                src={embedUrl}
                className='aspect-video h-auto w-full'
                allowFullScreen
                frameBorder='0'
                title='Embedded video'
              />
            ) : (
              <video
                src={videoSrc}
                poster={poster}
                className='aspect-video h-auto w-full object-cover'
                playsInline
                controls
                autoPlay={autoPlay}
                muted={muted}
                loop={loop}
              />
            )}
          </div>
        </div>

        <div className='w-full text-left md:order-1 md:w-1/2'>
          <div className='mt-[12px] max-w-[525px] text-white'>
            <h2 className='text-[30px] leading-[30px] font-medium tracking-[-0.6px] not-italic md:text-[60px] md:leading-[60px] md:font-normal md:tracking-[-0.84px]'>
              {headline}
            </h2>
          </div>

          {subheader ? (
            <p className='mt-4 max-w-[500px] text-[14px] leading-[20px] text-foreground-secondary-glass md:text-[16px] md:leading-[24px]'>
              {subheader}
            </p>
          ) : null}
        </div>
      </div>
    </section>
  );
};

export default VideoHighlightSection;