"use client";

import Image from "next/image";
import { useState } from "react";

const allArticles = Array.from({ length: 20 }, (_, i) => ({
  title: [
    "Operasi Keselamatan Musi 2024: Ditlantas Polda Sumsel Himbau Keselamatan de...",
    "Gelar Operasi Semeru, Kanit Lantas Gencarkan Sosialisasi Keselamatan Berken...",
    "Kapolsek Sooko sambang dunia pendidikan berikan himbauan kamtibmas di MTS S...",
    "PATROLI DIALOGIS POLSEK GONDANG TINGKATKAN KEWASPADAAN SEKITAR KEPADA SATPAM",
  ][i % 4],
  date: "07-03-2024, 07:55",
  image: `/images/article${(i % 4) + 1}.jpg`,
}));

const articlesPerPage = 4;
const totalPages = Math.ceil(allArticles.length / articlesPerPage);

export default function DashboardRecentArticles() {
  const [currentPage, setCurrentPage] = useState(1);

  const paginatedArticles = allArticles.slice(
    (currentPage - 1) * articlesPerPage,
    currentPage * articlesPerPage
  );

  return (
    <div className="p-4 bg-white rounded-lg shadow-md">
      {/* Header */}
      <div className="flex justify-between items-center mb-4">
        <h2 className="font-semibold text-base">Recent Article</h2>
        <button className="px-4 py-1 border border-blue-500 text-blue-500 rounded-full hover:bg-blue-50 text-sm">
          Buat Article
        </button>
      </div>

      {/* Article List */}
      <ul className="space-y-4">
        {paginatedArticles.map((article, index) => (
          <li key={index} className="flex items-start space-x-3">
            <Image
              src={article.image}
              alt={article.title}
              className="w-16 h-16 rounded object-cover"
            />
            <div className="flex-1">
              <h3 className="text-sm font-medium leading-snug line-clamp-2">
                {article.title}
              </h3>
              <p className="text-xs text-gray-500 mt-1">{article.date}</p>
            </div>
          </li>
        ))}
      </ul>

      {/* Pagination */}
      <div className="flex items-center justify-center mt-6 space-x-1 text-sm">
        <button
          onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
          className="px-2 py-1 rounded text-gray-600"
          disabled={currentPage === 1}
        >
          &lt;
        </button>

        {[...Array(totalPages).keys()].slice(0, 5).map((_, idx) => {
          const page = idx + 1;
          return (
            <button
              key={page}
              onClick={() => setCurrentPage(page)}
              className={`px-3 py-1 rounded-full ${
                currentPage === page
                  ? "bg-blue-600 text-white"
                  : "bg-gray-100 text-gray-700"
              }`}
            >
              {page}
            </button>
          );
        })}

        <span className="px-2 py-1 text-gray-400">...</span>

        <button
          onClick={() => setCurrentPage(totalPages)}
          className="px-3 py-1 bg-gray-100 text-gray-700 rounded-full"
        >
          {totalPages}
        </button>

        <button
          onClick={() => setCurrentPage((p) => Math.min(p + 1, totalPages))}
          className="px-2 py-1 rounded text-gray-600"
          disabled={currentPage === totalPages}
        >
          &gt;
        </button>
      </div>
    </div>
  );
}