// Investment Plan Cards Section
import { useState } from "react"
import { Dialog } from "@headlessui/react"
import { Play, X } from "lucide-react"

const videoData = [
  {
    title: "",
    thumbnail:
      "t1.jpg",
    videoUrl: "/1.mov",
  },
  {
    title: "",
    thumbnail:
      "t2.jpg",
    videoUrl: "/2.mov",
  },
  {
    title: "",
    thumbnail:
      "t3.jpg",
    videoUrl: "/3.mov",
  },
]

export default function VideoCards() {
  const [isOpen, setIsOpen] = useState(false)
  const [selectedVideo, setSelectedVideo] = useState(null)

  const openModal = (videoUrl: any) => {
    setSelectedVideo(videoUrl)
    setIsOpen(true)
  }

  const closeModal = () => {
    setIsOpen(false)
    setSelectedVideo(null)
  }

  return (
    <section className="container mx-auto px-4 lg:px-8 py-10">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {videoData.map((video, idx) => (
          <button
            key={idx}
            onClick={() => openModal(video.videoUrl)}
            className="relative focus:ring-0 bg-opacity-5 h-[19rem] w-full rounded-2xl flex justify-center items-center text-white"
            style={{
              background:
                `linear-gradient(0deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20)), url(${video.thumbnail}) center/cover no-repeat`,
            }}
          >
            <span className="p-3 rounded-full bg-white bg-opacity-40"><Play size={24} /></span>
            <p className="absolute bottom-6 left-7 text-2xl font-semibold">
              {video.title}
            </p>
          </button>
        ))}
      </div>

      <Dialog
        open={isOpen}
        onClose={closeModal}
        className="fixed z-50 inset-0 overflow-y-auto"
      >
        <div className="flex items-center justify-center min-h-screen px-4">
          <div className="fixed inset-0 bg-black bg-opacity-60" />
          <div className="bg-white rounded-2xl overflow-hidden shadow-xl transform transition-all max-w-3xl w-full relative z-50">
            <button
              onClick={closeModal}
              className="absolute top-3 right-3 p-2 z-10 bg-white bg-opacity-70 rounded-full"
            >
              <X className="w-6 h-6 text-black" />
            </button>
            {selectedVideo && (
              <div className="w-full aspect-video">
                <video
                  src={selectedVideo}
                  controls
                  autoPlay
                  className="w-full h-full rounded-b-2xl"
                />

              </div>
            )}
          </div>
        </div>
      </Dialog>
    </section>
  )
}