"use client";
import { useEffect, useRef, useState } from "react";
import { Button } from "@/components/ui/basic";
import { createMediaSource } from "@/lib/live/player";
export function LivePlayer({ url }: { url: string }) {
  const ref = useRef<HTMLVideoElement>(null);
  const [err, setErr] = useState("");
  useEffect(() => {
    if (!ref.current) return;
    const p = createMediaSource(ref.current, url);
    p.connect().catch(() => setErr("Stream unavailable"));
    return p.destroy;
  }, [url]);
  return (
    <div className="relative">
      <video
        ref={ref}
        muted
        playsInline
        controls
        className="aspect-video w-full rounded-xl bg-black"
      />
      <div className="absolute right-2 top-2 flex gap-2">
        <Button onClick={() => ref.current?.requestFullscreen()}>
          Fullscreen
        </Button>
        <Button
          onClick={() => {
            setErr("");
            ref.current?.load();
          }}
        >
          Reconnect
        </Button>
      </div>
      {err && <p className="mt-2 text-red-300">{err}</p>}
    </div>
  );
}