"use client";

import React, { useEffect, useState } from "react";
import fallbackSrc from "@/public/logo.png";
import Image, { StaticImageData } from "next/image";

interface VideoWithFallbackProps
  extends React.VideoHTMLAttributes<HTMLVideoElement> {
  src: string;
  fallbackSrc?: string | StaticImageData;
  className?: string;
}

const VideoWithFallback: React.FC<VideoWithFallbackProps> = ({
  src,
  className = "",
  fallbackSrc: customFallback,
  ...rest
}) => {
  const [videoSrc, setVideoSrc] = useState<string>(src);
  const [isFallback, setIsFallback] = useState(false);

  useEffect(() => {
    setVideoSrc(src);
    setIsFallback(false);
  }, [src]);

  const handleError = () => {
    setIsFallback(true);
  };

  if (isFallback || !videoSrc) {
    return (
      <div className={`relative ${className}`}>
        <Image
          src={customFallback || fallbackSrc}
          alt="Fallback content"
          fill
          className="object-contain"
          unoptimized={!!customFallback}
          onError={handleError}
        />
      </div>
    );
  }

  return (
    <video
      src={videoSrc}
      className={`${className} w-full h-full`}
      onError={handleError}
      playsInline
      muted={rest.muted !== undefined ? rest.muted : true}
      controls={rest.controls !== undefined ? rest.controls : true}
      {...rest}
    />
  );
};

export default VideoWithFallback;