"use client";

const VIDEO_EXTENSIONS = [".mp4", ".mov", ".webm", ".ogg", ".m4v"];

function isVideoMedia(url: string) {
  const normalizedUrl = url.split("?")[0].toLowerCase();
  return VIDEO_EXTENSIONS.some((extension) => normalizedUrl.endsWith(extension));
}

interface SocialMediaMediaPreviewProps {
  src: string;
  alt: string;
  className?: string;
  containerClassName?: string;
}

export function SocialMediaMediaPreview({
  src,
  alt,
  className,
  containerClassName,
}: SocialMediaMediaPreviewProps) {
  if (!src) {
    return null;
  }

  const mediaClassName =
    className ??
    "max-h-[420px] w-full rounded-xl border object-cover";
  const wrapperClassName = containerClassName ?? "overflow-hidden";

  if (isVideoMedia(src)) {
    return (
      <div className={wrapperClassName}>
        <video
          controls
          playsInline
          preload="metadata"
          className={mediaClassName}
          src={src}
        >
          {alt}
        </video>
      </div>
    );
  }

  return (
    <div className={wrapperClassName}>
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src={src}
        alt={alt}
        loading="lazy"
        className={mediaClassName}
      />
    </div>
  );
}