import { forwardRef } from "react";
import type { ObjectFit } from "../types";

interface VideoPlayerProps {
  videoUrl: string;
  rotation: number;
  objectFit: ObjectFit;
  loop: boolean;
  onTogglePlay: () => void;
}

export const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
  ({ videoUrl, rotation, objectFit, loop, onTogglePlay }, ref) => {
    return (
      <video
        ref={ref}
        src={videoUrl}
        className={[
          // 旋转 0/180：充满容器盒子；
          // 旋转 90/270：用中心定位 + 100vh/100vw，保证铺满全屏
          rotation % 180 === 0
            ? "absolute inset-0 h-full w-full bg-black/70 cursor-pointer"
            : "absolute top-1/2 left-1/2 h-[100vw] w-[100vh] bg-black/70 cursor-pointer",
        ].join(" ")}
        style={{
          transform:
            rotation % 180 === 0
              ? `rotate(${rotation}deg)`
              : `translate(-50%, -50%) rotate(${rotation}deg)`,
          transformOrigin: "center center",
          objectFit,
        }}
        playsInline
        loop={loop}
        onClick={onTogglePlay}
      />
    );
  }
);

VideoPlayer.displayName = "VideoPlayer";