1"use client";
2
3import { useState } from "react";
4
5function VideoDialog({
6  src,
7  isOpen,
8  onClose,
9}: {
10  src: string;
11  isOpen: boolean;
12  onClose: () => void;
13}) {
14  if (!isOpen) return null;
15
16  return (
17    <div
18      className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4"
19      onClick={onClose}
20    >
21      <div
22        className="relative w-full max-w-6xl"
23        onClick={(e) => e.stopPropagation()}
24      >
25        <video src={src} controls autoPlay className="w-full rounded-lg" />
26      </div>
27    </div>
28  );
29}
30
31export function VideoContent({ src, ...props }: any) {
32  const [isDialogOpen, setIsDialogOpen] = useState(false);
33  const videoSrc =
34    src || props.children?.find((child: any) => child?.props?.src)?.props?.src;
35
36  return (
37    <>
38      <div
39        className="relative cursor-pointer group mb-4"
40        onClick={() => setIsDialogOpen(true)}
41      >
42        <video src={videoSrc} muted className="w-full rounded-lg" {...props} />
43        <div className="absolute inset-0 flex items-center justify-center bg-black/20 group-hover:bg-black/30 transition-colors rounded-lg">
44          <div className="bg-white/90 rounded-full p-4 group-hover:scale-110 transition-transform">
45            <svg
46              className="w-12 h-12 text-black"
47              fill="currentColor"
48              viewBox="0 0 24 24"
49            >
50              <path d="M8 5v14l11-7z" />
51            </svg>
52          </div>
53        </div>
54      </div>
55      <VideoDialog
56        src={videoSrc}
57        isOpen={isDialogOpen}
58        onClose={() => setIsDialogOpen(false)}
59      />
60    </>
61  );
62}
63