import React, { useState, useEffect } from "react";
import { Megaphone } from "lucide-react";

const messages = [
    "Peraturan Menteri Lingkungan Hidup dan Kehutanan No. 14 Tahun 2024 Tentang Penyelenggaraan Pengawasan dan Sanksi Administratif Lingkungan Hidup",
    "Workshop Peningkatan Kapasitas Pengendalian Pencemaran Udara akan diselenggarakan pada bulan depan.",
    "DLH DKI Jakarta mengajak masyarakat untuk berpartisipasi dalam program lingkungan ramah sampah.",
];

export default function RunningText() {
    const [currentMessageIndex, setCurrentMessageIndex] = useState(0);
    const [isVisible, setIsVisible] = useState(true);

    useEffect(() => {
        const interval = setInterval(() => {
            setIsVisible(false); // Hide current message

            setTimeout(() => {
                setCurrentMessageIndex(
                    (prevIndex) => (prevIndex + 1) % messages.length
                );
                setIsVisible(true); // Show new message
            }, 500); // Wait for fade out animation
        }, 3000); // Change message every 3 seconds

        return () => clearInterval(interval);
    }, []);

    return (
        <div className="w-full bg-green-100 p-2 flex overflow-hidden">
            <div className="flex container max-w-7xl px-8 relative">
                <Megaphone className="w-5 h-5 mr-2 text-black flex-shrink-0" />
                <div className="overflow-hidden relative h-[1.5rem]">
                    <p
                        className={`text-sm text-black transition-opacity duration-500 ease-in-out ${
                            isVisible ? "opacity-100" : "opacity-0"
                        }`}
                    >
                        {messages[currentMessageIndex]}
                    </p>
                </div>
            </div>
        </div>
    );
}