import { ChevronLeft, ChevronRight, Clock, Zap } from "lucide-react";
import Image from "next/image";

type Article = {
  image: string;
  category: string;
  title: string;
  date: string;
  author: string;
};

const articles: Article[] = [
  {
    image: "/oneway.jpg",
    category: "BERANDA",
    title:
      "Antisipasi Kepadatan, Korlantas Polri Terapkan One Way Lokal di Tol Cipali",
    author: "SALMA HASNA",
    date: "14 Januari 2025",
  },
  {
    image: "/contraflow.jpg",
    category: "BERANDA",
    title:
      "Antisipasi Kemacetan, Korlantas Polri Berlakukan Contraflow di Tol Cikampek",
    author: "SALMA HASNA",
    date: "27 MARET 2025",
  },
  {
    image: "/prediksi.jpg",
    category: "BERANDA",
    title:
      "Kakorlantas: Penerapan One Way Nasional Harus Terukur, Bukan Sekadar Prediksi",
    author: "SALMA HASNA",
    date: "26 MARET 2025",
  },
  {
    image: "/km71.jpg",
    category: "BERANDA",
    title:
      "Kakorlantas Tinjau KM 71 Tol Cikampek: Persiapan One Way Nasional Mudik Lebaran",
    author: "SALMA HASNA",
    date: "26 MARET 2025",
  },
  {
    image: "/presiden.jpg",
    category: "BERANDA",
    title: "Presiden Prabowo Lantik 31 Duta Besar Baru",
    author: "SALMA HASNA",
    date: "25 MARET 2025",
  },
];

const trendingNews = {
  title:
    "Pemerintah Percepat Pencairan THR ASN dan Pensiunan untuk Tingkatkan Daya Beli Masyarakat",
  date: "10 Maret 2025",
};

export default function HeroNewsSection() {
  return (
    <section className="max-w-7xl mx-auto px-4 py-5 bg-white">
      <div className="flex items-center bg-white border w-full shadow-sm overflow-hidden mb-4">
        <div className="bg-red-600 text-white text-xs font-bold uppercase px-4 py-3 flex items-center gap-2">
          <Zap className="w-4 h-4" />
          Trending
        </div>
        <div className="flex-1 px-4 truncate text-sm text-gray-800">
          {trendingNews.title}
          <span className="text-xs text-gray-500 pr-4 hidden sm:inline ml-5">
            {trendingNews.date}
          </span>
        </div>

        <div className="flex items-center border-l">
          <button className="px-3 py-3 hover:bg-gray-100">
            <ChevronLeft className="w-4 h-4 text-gray-600" />
          </button>
          <button className="px-3 py-3 hover:bg-gray-100">
            <ChevronRight className="w-4 h-4 text-gray-600" />
          </button>
        </div>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-0.5">
        <div className="md:col-span-2 lg:col-span-3 relative">
          <Image
            src={articles[0].image}
            alt={articles[0].title}
            width={800}
            height={500}
            className="w-full h-full max-h-[460px] object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/50 to-transparent p-6 flex flex-col justify-between">
            <div>
              <span className="text-xs bg-red-600  w-[73px] text-white px-2 py-0.5 inline-block mb-2 uppercase">
                {articles[0].category}
              </span>
            </div>
            <div>
              <h2 className="text-sm md:text-xl lg:text-2xl font-bold text-white leading-snug mb-2 w-full md:w-9/12">
                {articles[0].title}
              </h2>
              <p className="text-xs text-[#FFFFFF] mt-1 flex flex-wrap items-center gap-2 mb-3">
                <span className="text-gray-500">BY </span>
                <span className="font-semibold text-white">
                  {articles[0].author}
                </span>
                <Clock className="w-3 h-3 text-[#FFFFFF]" />
                {articles[0].date}
              </p>
            </div>
          </div>
        </div>

        <div className="md:col-span-1 lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-2">
          {articles.slice(1).map((article, index) => (
            <div key={index} className="relative">
              <Image
                src={article.image}
                alt={article.title}
                width={400}
                height={240}
                className="w-full h-56 object-cover"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent p-4 flex flex-col justify-between">
                <div>
                  <span className="text-xs bg-red-600 text-white px-2 py-0.5 inline-block uppercase">
                    {article.category}
                  </span>
                </div>

                <div className="flex flex-col">
                  <h3 className="text-sm font-semibold text-white leading-snug mb-1">
                    {article.title}
                  </h3>
                  <p className="text-[10px] md:text-xs text-gray-300 flex items-center gap-1">
                    <Clock className="w-3 h-3 text-[#FFFFFF]" />
                    {article.date}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div className="relative mt-10 mb-2 h-[188px] overflow-hidden flex items-center mx-auto border">
        <Image
          src="/image-kolom.png"
          alt="Berita Utama"
          fill
          className="object-contain"
        />
      </div>
    </section>
  );
}