"use client";
import * as Dialog from "@radix-ui/react-dialog";
import { Button, Card } from "@/components/ui/basic";
export function PlaybackModal({
  open,
  onOpenChange,
  url,
}: {
  open: boolean;
  onOpenChange: (v: boolean) => void;
  url?: string;
}) {
  return (
    <Dialog.Root open={open} onOpenChange={onOpenChange}>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-black/70" />
        <Dialog.Content className="fixed left-1/2 top-1/2 w-[92vw] max-w-4xl -translate-x-1/2 -translate-y-1/2">
          <Card>
            <Dialog.Title className="mb-4 text-xl">Clip playback</Dialog.Title>
            {url ? (
              <video
                className="aspect-video w-full rounded-xl bg-black"
                src={url}
                controls
                autoPlay
              />
            ) : (
              <p>Loading playback…</p>
            )}
            <Dialog.Close asChild>
              <Button className="mt-4">Close</Button>
            </Dialog.Close>
          </Card>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}