import React, { useState } from "react";
import { Button } from "@/components/ui/button";
import { X, ArrowLeft, ArrowRight } from "lucide-react";

const PopupModal = ({ onClose }: { onClose: () => void }) => {
    const slides = [
        {
            title: "Pelatihan dan Sertifikasi Online Bidang Pengendalian Pencemaran Udara",
            image: "/assets/popup-1.jpeg",
            description:
                "Kegiatan ini diselenggarakan oleh DLH Provinsi DKI Jakarta bekerja sama dengan LSP Tersertifikasi BNSP.",
        },
        {
            title: "Workshop Peningkatan Kapasitas Pengendalian Pencemaran Udara",
            image: "/assets/popup-2.jpeg",
            description:
                "Workshop ini bertujuan untuk meningkatkan pengetahuan dan keterampilan di bidang lingkungan hidup. Workshop ini bertujuan untuk meningkatkan pengetahuan dan keterampilan di bidang lingkungan hidup.",
        },
        {
            title: "Sosialisasi Program Ramah Lingkungan",
            image: "/assets/popup-2.jpeg",
            description:
                "DLH DKI Jakarta mengajak masyarakat untuk lebih peduli terhadap lingkungan sekitar.",
        },
    ];

    const [currentSlide, setCurrentSlide] = useState(0);

    const nextSlide = () => {
        setCurrentSlide((prev) => (prev + 1) % slides.length);
    };

    const prevSlide = () => {
        setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
    };

    return (
        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50 container md:max-w-none">
            <div className="bg-white p-6 rounded-lg relative md:max-w-2xl mx-auto w-full h-50 md:h-5/6 flex flex-col justify-between md:justify-around">
                <button className="absolute top-2 right-2" onClick={onClose}>
                    <X className="w-6 h-6 text-gray-700" />
                </button>
                <h2 className="md:text-xl text-md font-bold text-center mb-4">
                    {slides[currentSlide].title}
                </h2>
                <div className="relative">
                    <img
                        src={slides[currentSlide].image}
                        alt="Popup Slide Image"
                        className="w-full h-full md:h-96 object-contain mb-4"
                    />
                    <button
                        onClick={prevSlide}
                        className="absolute left-2 top-1/2 transform -translate-y-1/2 p-2 bg-white bg-opacity-50 rounded-full"
                    >
                        <ArrowLeft className="w-6 h-6 text-gray-700" />
                    </button>
                    <button
                        onClick={nextSlide}
                        className="absolute right-2 top-1/2 transform -translate-y-1/2 p-2 bg-white bg-opacity-50 rounded-full"
                    >
                        <ArrowRight className="w-6 h-6 text-gray-700" />
                    </button>
                </div>
                {/* <h2 className="text-xl font-bold text-center mb-4">
                    {slides[currentSlide].title}
                </h2> */}
                <p className="text-sm text-gray-600 text-center mb-4 overflow-hidden text-ellipsis whitespace-nowrap">
                    {slides[currentSlide].description}
                </p>
                <div className="flex justify-center">
                    <Button className="bg-green-800 text-white px-6 py-2 rounded-lg">
                        Selengkapnya
                    </Button>
                </div>
            </div>
        </div>
    );
};

export default PopupModal;
