export default function PostRecapTable() {
  const postsData = [
    { name: "POLDA SUMUT", posts: 5304 },
    { name: "SATWIL", posts: 4043 },
    { name: "POLDA JATENG", posts: 3482 },
    { name: "POLDA JATIM", posts: 3138 },
    { name: "POLDA SUMSEL", posts: 2677 },
    { name: "POLDA JABAR", posts: 1677 },
    { name: "POLDA KALTIM", posts: 1565 },
    { name: "POLDA RIAU", posts: 1192 },
    { name: "POLDA KALBAR", posts: 920 },
    { name: "POLDA SULBAR", posts: 730 },
    { name: "POLDA METRO JAYA", posts: 707 },
    { name: "POLDA BALI", posts: 580 },
    { name: "POLDA SULTRA", posts: 375 },
    { name: "POLDA MALUKU", posts: 373 },
    { name: "POLDA BABEL", posts: 344 },
  ];

  return (
    <div className="p-4 bg-white shadow-md rounded-lg w-full lg:w-[55%]">
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4">
        <h2 className="font-semibold text-xs sm:text-sm">Rekapitulasi Post Berita Polda/Polres Pada Website</h2>
        <p className="text-xs mt-2 sm:mt-0 sm:text-right">
          <span className="font-semibold">01-05-2025</span> - <span className="font-semibold">08-05-2025</span>
        </p>
      </div>

      {/* Scrollable container */}
      <div className="max-h-[400px] overflow-y-auto overflow-x-auto rounded">
        <table className="min-w-full text-sm text-left">
          <thead className="text-black sticky top-0 z-10 bg-white">
            <tr>
              <th className="border px-4 py-2 w-10">NO</th>
              <th className="border px-4 py-2">POLDA/POLRES</th>
              <th className="border px-4 py-2 text-right">JUMLAH POST BERITA</th>
            </tr>
          </thead>
          <tbody className="text-gray-700">
            {postsData.map((item, index) => (
              <tr key={index} className="hover:bg-gray-50">
                <td className="border px-4 py-2 text-center">{index + 1}</td>
                <td className="border px-4 py-2">{item.name}</td>
                <td className="border px-4 py-2 text-right">{item.posts}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}