import * as React from "react";
import { cn } from "@/lib/utils";

export type VideoBackgroundProps = {
  src?: string;
  poster?: string;
  overlay?: "light" | "medium" | "dark";
  children?: React.ReactNode;
  className?: string;
};

export function VideoBackground({
  src,
  poster,
  overlay = "medium",
  children,
  className,
}: VideoBackgroundProps) {
  const overlayClass = {
    light: "bg-black/25",
    medium: "bg-black/50",
    dark: "bg-black/70",
  }[overlay];

  return (
    <div
      className={cn(
        "relative min-h-screen w-full overflow-hidden bg-neutral-900",
        className,
      )}
    >
      {src && (
        <video
          className="absolute inset-0 h-full w-full object-cover"
          autoPlay
          muted
          loop
          playsInline
          poster={poster}
          src={src}
        />
      )}
      {!src && poster && (
        <img
          className="absolute inset-0 h-full w-full object-cover"
          src={poster}
          alt=""
          aria-hidden="true"
        />
      )}
      <div className={cn("absolute inset-0", overlayClass)} />
      <div className="relative z-10">{children}</div>
    </div>
  );
}