import React, { useEffect, useState } from "react";

const images = ["/assets/banner-sample.png", "/assets/img-header-blog.png"];

const Hero: React.FC = () => {
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  useEffect(() => {
    const intervalId = setInterval(() => {
      setCurrentImageIndex((prevIndex) => (prevIndex + 1) % images.length);
    }, 10000);
    return () => clearInterval(intervalId);
  }, []);

  return (
    <div 
    className="flex flex-col lg:flex-row items-start gap-4 p-4 max-w-screen-xl h-fit mx-auto">
      {/* Section Gambar Utama */}
      <div className="lg:w-2/3 w-full">
        <div className="relative">
          <img src="/assets/banner-sample.png" alt="Gambar Utama" className="w-full rounded-lg" />
          <div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-4 rounded-b-lg">
            <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">Liputan Kegiatan</span>
            <h2 className="text-lg font-bold mt-2">Divisi Humas Polri Siap Menuju Zona Integritas</h2>
            <p className="text-sm mt-1">15 Maret 2024 14:01 WIB | 👁️ 633</p>
          </div>
        </div>
      </div>

      {/* Section Daftar Artikel */}
      <div className="lg:w-1/3 w-full">
        <ul className="space-y-4">
          {[
            {
              label: "OPS MANTAP PRAJA & PILKADA 2024",
              title: "Doa Bersama Lintas Agama Jelang Pilkada di Papua",
              time: "26 November 2024 16:33 WIT",
              views: 13,
            },
            {
              label: "OPS MANTAP PRAJA & PILKADA 2024",
              title: "Potret Pengawalan Distribusi Logistik Pilkada ke Distrik-distrik di Kabupaten Yahukimo",
              time: "26 November 2024 16:29 WIT",
              views: 29,
            },
            {
              label: "INFOGRAFIS",
              title: "Dirgahayu ke-62 Seskoal",
              time: "26 November 2024 16:26 WIB",
              views: 2,
            },
            {
              label: "UNGKAP KASUS",
              title: "Evakuasi 30 Korban Kecelakaan Maut Truk di Tolikara",
              time: "26 November 2024 16:25 WIT",
              views: 26,
            },
          ].map((item, index) => (
            <li key={index} className="flex gap-4 items-start bg-white shadow rounded-lg p-4">
              <div className="flex-shrink-0 w-24 h-16 bg-gray-200 rounded-lg">
                {/* Placeholder Thumbnail */}
                <img
                  src="/"
                  alt={item.title}
                  className="w-full h-full object-cover rounded-lg"
                />
              </div>
              <div>
                <span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg  text-xs font-bold uppercase">{item.label}</span>
                <h3 className="text-sm font-bold mt-2">{item.title}</h3>
                <p className="text-xs text-gray-500 mt-1">
                  {item.time} | 👁️ {item.views}
                </p>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default Hero;