"use client";

import { useEffect, useState } from "react";
import KinescopeReactPlayer from "@kinescope/react-kinescope-player";

interface Props {
  videoId: string;
  poster?: string;
}

export function KinescopePlayer({ videoId, poster }: Props) {
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);

  return (
    <div className="w-full aspect-video" style={{ border: "2px solid var(--border)" }}>
      {mounted && (
        <KinescopeReactPlayer
          videoId={videoId}
          width="100%"
          height="100%"
          poster={poster}
        />
      )}
    </div>
  );
}