import { useRef } from "react";

export function GamePlayer({
  embedUrl,
  title,
  onFullscreen,
}: {
  embedUrl: string;
  title: string;
  onFullscreen: () => void;
}) {
  const src = embedUrl;
  const iframeRef = useRef<HTMLIFrameElement>(null);

  return (
    <div className="absolute inset-0">
      <iframe
        ref={iframeRef}
        src={src}
        title={title}
        className="absolute inset-0 w-full h-full border-0"
        allow="autoplay; fullscreen; gamepad; gyroscope; accelerometer"
        allowFullScreen
        referrerPolicy="no-referrer-when-downgrade"
      />
      <div className="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent flex justify-between items-center pointer-events-none">
        <span className="text-[10px] font-bold text-white/50 tracking-widest truncate pr-2">{title}</span>
        <button
          type="button"
          onClick={onFullscreen}
          className="text-white/70 hover:text-white text-xs font-bold tracking-widest pointer-events-auto shrink-0"
        >
          [ FULLSCREEN ]
        </button>
      </div>
    </div>
  );
}