import { cn } from "@/lib/utils";

/**
 * Autoplaying product footage — muted, looping, inline (the original's webm/mp4
 * demos). Renders both sources so the browser picks webm or falls back to mp4.
 * Decorative motion: paused for reduced-motion users still shows the poster.
 */
export function Video({
  webm,
  mp4,
  poster,
  className,
  loop = true,
}: {
  webm?: string;
  mp4?: string;
  poster?: string;
  className?: string;
  loop?: boolean;
}) {
  return (
    <video
      className={cn("h-full w-full object-cover", className)}
      autoPlay
      muted
      loop={loop}
      playsInline
      preload="metadata"
      poster={poster}
    >
      {webm ? <source src={webm} type="video/webm" /> : null}
      {mp4 ? <source src={mp4} type="video/mp4" /> : null}
    </video>
  );
}