import React from "react";

const EventCalender = () => {
  return (
    <div className="mt-8 rounded-lg bg-white dark:bg-zinc-900 p-4 shadow">
      <h2 className="text-lg font-bold text-red-600 border-b border-red-600 mb-4 pb-2">
        KALENDER ACARA
      </h2>
      <div className="flex flex-col md:flex-row gap-4">
        <div className="w-full md:w-1/2">
          <div className="bg-gray-100 dark:bg-zinc-800 p-4 rounded-md ">
            <div className="text-center font-semibold mb-2">Mei 2025</div>
            <div className="grid grid-cols-7 gap-1 text-sm text-center">
              {["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((d) => (
                <div key={d} className="font-medium">
                  {d}
                </div>
              ))}
              {[...Array(35)].map((_, i) => (
                <div
                  key={i}
                  className={`p-1 rounded ${
                    [6, 7, 15].includes(i) ? "bg-red-600 text-white" : ""
                  }`}
                >
                  {i >= 2 && i - 1}
                </div>
              ))}
            </div>
          </div>
          <div className="space-y-4 mt-3">
            <div className="flex items-center bg-gray-200 rounded-xl shadow-sm p-2">
              <img
                src="/images/all-img/calendar1.png"
                alt="HUT Polwan"
                className="w-24 h-20 object-cover rounded"
              />
              <div className="flex justify-between items-center w-full ml-3">
                <div className="text-sm font-semibold line-clamp-2">
                  HUT Polwan ke-76, Kapolri...
                </div>
                <div className="text-sm font-semibold whitespace-nowrap ml-3">
                  16 Mei - 16 Mei
                </div>
              </div>
            </div>

            <div className="flex items-center bg-gray-200 rounded-xl shadow-sm p-2">
              <img
                src="/images/all-img/calendar2.png"
                alt="Olahraga"
                className="w-24 h-20 object-cover rounded"
              />
              <div className="flex justify-between items-center w-full ml-3">
                <div className="text-sm font-semibold line-clamp-2 uppercase">
                  Olahraga Bersama Pad...
                </div>
                <div className="text-sm font-semibold whitespace-nowrap ml-3">
                  22 Mei - 22 Mei
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Detail Acara */}
        <div className="w-full md:w-1/2 space-y-4">
          <div className="bg-gray-100 dark:bg-zinc-800 rounded-md p-2 mt-4">
            <img
              src="/images/all-img/calendar1.png"
              alt="Detail Event"
              className="rounded mb-2"
            />
            <p className="text-sm font-semibold mb-1">
              HUT Polwan ke-76, Kapolri Apresiasi Prestasi yang Diberikan
            </p>
            <p className="text-xs text-gray-500 mb-1">
              Kapolri Jenderal Pol. Listyo Sigit Prabowo memberikan apresiasi
              kepada polisi wanita yang berprestasi...
            </p>
            <a href="#" className="text-xs text-blue-500">
              Lihat Selengkapnya
            </a>
          </div>
        </div>
      </div>
    </div>
  );
};

export default EventCalender;