// PopupModal.js
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.",
        },
        {
            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">
            <div className="bg-white p-6 rounded-lg max-w-lg w-full relative">
                <button className="absolute top-2 right-2" onClick={onClose}>
                    <X className="w-6 h-6 text-gray-700" />
                </button>
                <h2 className="text-xl font-bold text-center mb-4">
                    {slides[currentSlide].title}
                </h2>
                <img
                    src={slides[currentSlide].image}
                    alt="Popup Slide Image"
                    className="w-full h-auto mb-4"
                />
                <p className="text-sm text-gray-600 text-center mb-4">
                    {slides[currentSlide].description}
                </p>
                <div className="flex justify-between items-center mb-4">
                    <button onClick={prevSlide} className="p-2">
                        <ArrowLeft className="w-6 h-6 text-gray-700" />
                    </button>
                    <button onClick={nextSlide} className="p-2">
                        <ArrowRight className="w-6 h-6 text-gray-700" />
                    </button>
                </div>
                <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;