"use client";

import { Clock } from "lucide-react";
import Image from "next/image";

const popularPosts = [
  {
    id: 1,
    image: "/presiden.jpg",
    category: "BERANDA",
    title: "Presiden Prabowo Lantik 31 Duta Besar Baru",
    excerpt:
      "JAKARTA - Pada Senin (24/3) petang, Presiden Republik Indonesia, Prabowo Subianto, melantik 31 Duta Besar Luar Biasa dan Berkuasa Penuh...",
    author: "SALMA HASNA",
    date: "25 MARET 2025",
    comments: 0,
  },
  {
    id: 2,
    image: "/bkn.jpg",
    category: "BERANDA",
    title:
      "BKN Perkuat Keamanan Layanan Digital ASN dengan Multi-Factor Authentication",
    excerpt:
      "Jakarta – Badan Kepegawaian Negara (BKN) terus meningkatkan keamanan layanan digital bagi Aparatur Sipil Negara (ASN) dengan menerapkan sistem verifikasi...",
    author: "SALMA HASNA",
    date: "24 MARET 2025",
    comments: 0,
  },
  {
    id: 3,
    image: "/snbp.jpg",
    category: "BERANDA",
    title: "Presiden Prabowo Lantik 31 Duta Besar Baru",
    excerpt:
      "JAKARTA - Pada Senin (24/3) petang, Presiden Republik Indonesia, Prabowo Subianto, melantik 31 Duta Besar Luar Biasa dan Berkuasa Penuh...",
    author: "SALMA HASNA",
    date: "25 MARET 2025",
    comments: 0,
  },
  {
    id: 4,
    image: "",
    category: "BERANDA",
    title:
      "BKN Perkuat Keamanan Layanan Digital ASN dengan Multi-Factor Authentication",
    excerpt:
      "Jakarta – Badan Kepegawaian Negara (BKN) terus meningkatkan keamanan layanan digital bagi Aparatur Sipil Negara (ASN) dengan menerapkan sistem verifikasi...",
    author: "SALMA HASNA",
    date: "24 MARET 2025",
    comments: 0,
  },
  {
    id: 5,
    image: "/bpi.jpg",
    category: "BERANDA",
    title: "Presiden Prabowo Lantik 31 Duta Besar Baru",
    excerpt:
      "JAKARTA - Pada Senin (24/3) petang, Presiden Republik Indonesia, Prabowo Subianto, melantik 31 Duta Besar Luar Biasa dan Berkuasa Penuh...",
    author: "SALMA HASNA",
    date: "25 MARET 2025",
    comments: 0,
  },
  {
    id: 6,
    image: "/pkp.jpg",
    category: "BERANDA",
    title:
      "BKN Perkuat Keamanan Layanan Digital ASN dengan Multi-Factor Authentication",
    excerpt:
      "Jakarta – Badan Kepegawaian Negara (BKN) terus meningkatkan keamanan layanan digital bagi Aparatur Sipil Negara (ASN) dengan menerapkan sistem verifikasi...",
    author: "SALMA HASNA",
    date: "24 MARET 2025",
    comments: 0,
  },
];

export default function Popular() {
  return (
    <section className="max-w-7xl mx-auto px-4 py-8">
      <div className="relative mb-10  h-[120px] sm:h-[160px] md:h-[188px] overflow-hidden flex items-center mx-auto border">
        <Image
          src="/image-kolom.png"
          alt="Berita Utama"
          fill
          className="object-contain"
        />
      </div>

      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 gap-4 border-b-2">
        <h2 className="text-lg sm:text-md font-serif font-semibold border-b-2 border-blue-700 inline-block pb-1">
          BERITA TERPOPULER
        </h2>
        <div className="flex flex-wrap gap-2 text-xs text-gray-600 uppercase font-medium">
          <button className="hover:text-blue-700">All</button>
          <button className="hover:text-blue-700">HUMAS.POLRI.GO.ID</button>
          <button className="hover:text-blue-700">TNI.MIL.ID</button>
          <button className="hover:text-blue-700">COVID19.GO.ID</button>
        </div>
      </div>

      <div className="space-y-8">
        {popularPosts.map((post) => (
          <div
            key={post.id}
            className={`flex gap-4 ${
              post.image ? "flex-col md:flex-row" : "flex-col"
            }`}
          >
            <div className="flex-1">
              <h3 className="text-base sm:text-lg md:text-xl font-bold leading-tight">
                {post.title}
              </h3>
              <div className="text-xs mt-1.5 mb-2 text-gray-600 space-x-2 flex items-center">
                <span>
                  BY{" "}
                  <span className="text-blue-700 font-semibold">
                    {post.author}
                  </span>
                </span>
                <Clock className="w-3 h-3 text-blue-500" />
                <span> {post.date}</span>
                <div className="text-blue-500">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="13"
                    height="13"
                    viewBox="0 0 1792 1536"
                  >
                    <path
                      fill="currentColor"
                      d="M896 128q-204 0-381.5 69.5T232.5 385T128 640q0 112 71.5 213.5T401 1029l87 50l-27 96q-24 91-70 172q152-63 275-171l43-38l57 6q69 8 130 8q204 0 381.5-69.5t282-187.5T1664 640t-104.5-255t-282-187.5T896 128m896 512q0 174-120 321.5t-326 233t-450 85.5q-70 0-145-8q-198 175-460 242q-49 14-114 22h-5q-15 0-27-10.5t-16-27.5v-1q-3-4-.5-12t2-10t4.5-9.5l6-9l7-8.5l8-9q7-8 31-34.5t34.5-38t31-39.5t32.5-51t27-59t26-76q-157-89-247.5-220T0 640q0-174 120-321.5t326-233T896 0t450 85.5t326 233T1792 640"
                    />
                  </svg>{" "}
                </div>
                <span>{post.comments}</span>
              </div>
              <p className="text-[15px] text-[#5A515E] line-clamp-2 mb-3">
                {post.excerpt}
              </p>
              <button className="border px-3 py-1.5 text-sm hover:shadow font-medium text-gray-800">
                READ MORE
              </button>
            </div>

            {post.image && (
              <div className="w-full md:w-1/3 relative">
                <div className="w-full aspect-[4/3] sm:w-[260px] sm:h-[157px] md:max-w-[320px] md:h-[220px] lg:max-w-[360px] lg:h-[257px] relative ml-auto">
                  <Image
                    src={post.image}
                    alt={post.title}
                    fill
                    className="object-cover rounded"
                  />
                  <span className="absolute top-2 left-2 bg-red-700 text-white text-[10px] sm:text-[11px] px-2 py-[2px] uppercase font-bold">
                    {post.category}
                  </span>
                </div>
              </div>
            )}
          </div>
        ))}
      </div>

      <div className="mt-8 flex flex-wrap gap-2 justify-start">
        <button className="border px-3 py-1 text-xs hover:bg-gray-100 rounded-sm">
          ‹ PREV
        </button>
        <button className="border px-3 py-1 text-xs hover:bg-gray-100 rounded-sm">
          NEXT ›
        </button>
      </div>

      <div className="relative my-6 h-[120px] sm:h-[160px] md:h-[188px] overflow-hidden flex items-center mx-auto border">
        <Image
          src="/image-kolom.png"
          alt="Berita Utama"
          fill
          className="object-contain"
        />
      </div>
    </section>
  );
}