import type { VideoBlockValue } from "@/types/wagtail";

const DIRECT_VIDEO_EXTENSIONS = [".mp4", ".webm", ".ogg"];

export default function Video({ value }: { value: VideoBlockValue }) {
  if (!value.video_url) {
    return null;
  }

  const isDirectFile = DIRECT_VIDEO_EXTENSIONS.some((ext) =>
    value.video_url.toLowerCase().includes(ext)
  );

  return (
    <section className="py-24">
      <div className="mx-auto max-w-5xl px-6">
        {value.heading && (
          <h2 className="mb-8 text-center text-4xl font-bold text-slate-900">
            {value.heading}
          </h2>
        )}
        <div className="overflow-hidden rounded-3xl bg-black shadow-lg">
          {isDirectFile ? (
            <video
              src={value.video_url}
              poster={value.poster?.url}
              controls
              className="aspect-video w-full"
            />
          ) : (
            <iframe
              src={value.video_url}
              allow="autoplay; fullscreen"
              allowFullScreen
              className="aspect-video w-full"
            />
          )}
        </div>
      </div>
    </section>
  );
}