import { BASE_URL } from "@/Constant";
import { CalendarDays } from "lucide-react";
import Image from "next/image";
import Link from "next/link";

export default function LatestNews({ event1, event2, event3, event4 }: any) {
  return (
    <div className="container m-auto">
      <div className="flex md:w-[80%] m-auto justify-between items-center w-full max-w-7xl mx-auto px-4 py-6">
        <h1 className="text-4xl md:text-5xl font-bold mb-6">Events</h1>
        <div className="flex rounded-lg  bg-btn p-0.5 shadow-lg rgb-button will-change-transform">
          <a
            href="#get-homedock"
            className="flex-1 font-normal text-md bg-white/90 px-6 py-3 hover:scale-105 rounded-lg  hover:-translate-y-2 transition duration-500 items-center flex justify-center hover:shadow-md will-change"
          >
            <Link href="/events" className="flex items-center will-change">
              <span className="will-change-transform">View All</span>
            </Link>
          </a>
        </div>
      </div>
      <div className="flex flex-col gap-3 m-auto md:gap-4 md:grid md:grid-cols-2 md:w-[70%] px-4 py-5">
        <div className="...">
          <div className="rounded-2xl overflow-hidden shadow-lg">
            <div className="flex flex-col">
              <div className="">
                <div className="relative h-full md:min-h-0">
                  {event1?.image && (
                    <Image
                      src={`${BASE_URL}${event1.image}`}
                      alt="Event"
                      className="object-cover w-full h-full"
                      width={100}
                      height={100}
                      unoptimized={true}
                    />
                  )}
                </div>
              </div>
              <div className="md:w-[100%] p-6 bg-customGray">
                <div className="flex flex-col h-full items-start justify-center space-y-4 w-[100%]">
                  <div className="flex items-center gap-2 text-gray-600">
                    <CalendarDays className="h-4 w-4 text-white" />
                    {event1?.createdAt && (
                      <span className="text-sm text-white">
                        {new Date(event1.createdAt).toLocaleString()}
                      </span>
                    )}
                  </div>
                  {event1?.title && (
                    <h2 className="text-xl font-[500] text-white">
                      {event1?.title}
                    </h2>
                  )}
                  {event1?.description && (
                    <p className="text-white text-sm">{event1?.description}</p>
                  )}

                  <button className="bg-white/25 px-4 py-2 hover:bg-white/100 hover:text-black  hover:scale-105 rounded-full text-sm text-white">
                    Read More
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="...">
          <div className="rounded-2xl overflow-hidden shadow-lg">
            <div className="flex md:flex-row">
              <div className="md:w-[87%] p-6 bg-customGray">
                <div className="flex flex-col h-full items-start justify-center space-y-4 w-[100%]">
                  <div className="flex items-center gap-2 text-gray-600">
                    <CalendarDays className="h-4 w-4 text-white" />
                    {event2?.createdAt && (
                      <span className="text-sm text-white">
                        {new Date(event2.createdAt).toLocaleString()}
                      </span>
                    )}
                  </div>
                  {event2?.title && (
                    <h2 className="text-xl font-[500] text-white">
                      {event2?.title}
                    </h2>
                  )}
                  {event2?.description && (
                    <p className="text-white text-sm">{event2?.description}</p>
                  )}
                  <button className="bg-white/25 px-4 py-2 hover:bg-white/100 hover:text-black  hover:scale-105 rounded-full text-sm text-white">
                    Read More
                  </button>
                </div>
              </div>
              <div className="md:w-1/2">
                <div className="relative h-full min-h-[200px] md:min-h-0">
                  {event2?.image && (
                    <Image
                      src={`${BASE_URL}${event2.image}`}
                      alt="Event"
                      className="object-cover w-full h-full"
                      width={100}
                      height={100}
                      unoptimized={true}
                    />
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="...">
          <div className="rounded-2xl overflow-hidden shadow-lg">
            <div className="flex md:flex-row">
              <div className="w-36">
                <div className="relative h-full min-h-[200px] md:min-h-0">
                  {event3?.image && (
                    <Image
                      src={`${BASE_URL}${event3.image}`}
                      alt="Event"
                      className="object-cover w-full h-full"
                      width={100}
                      height={100}
                      unoptimized={true}
                    />
                  )}
                </div>
              </div>

              <div className="md:w-[87%] p-6 bg-customGray">
                <div className="flex flex-col h-full items-start justify-center space-y-4 w-[100%]">
                  <div className="flex items-center gap-2 text-gray-600">
                    <CalendarDays className="h-4 w-4 text-white" />
                    {event3?.createdAt && (
                      <span className="text-sm text-white">
                        {new Date(event3.createdAt).toLocaleString()}
                      </span>
                    )}
                  </div>
                  {event3?.title && (
                    <h2 className="text-xl font-[500] text-white">
                      {event3?.title}
                    </h2>
                  )}
                  {event3?.description && (
                    <p className="text-white text-sm">{event3?.description}</p>
                  )}

                  <button className="bg-white/25 px-4 py-2 hover:bg-white/100 hover:text-black  hover:scale-105 rounded-full text-sm text-white">
                    Read More
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="md:relative md:-mt-20">
          <div className="rounded-2xl overflow-hidden shadow-lg">
            <div className="flex md:flex-row">
              <div className="md:w-[100%] p-6 bg-customGray">
                <div className="flex flex-col h-full items-start justify-center space-y-4 w-[100%]">
                  <div className="flex items-center gap-2 text-gray-600">
                    <CalendarDays className="h-4 w-4 text-white" />
                    {event4?.createdAt && (
                      <span className="text-sm text-white">
                        {new Date(event4.createdAt).toLocaleString()}
                      </span>
                    )}
                  </div>
                  {event4?.title && (
                    <h2 className="text-xl font-[500] text-white">
                      {event4?.title}
                    </h2>
                  )}
                  {event4?.description && (
                    <p className="text-white text-sm">{event4?.description}</p>
                  )}

                  <button className="bg-white/25 px-4 py-2 hover:bg-white/100 hover:text-black  hover:scale-105 rounded-full text-sm text-white">
                    Read More
                  </button>
                </div>
              </div>
              <div className="md:w-1/2">
                <div className="relative h-full min-h-[200px] md:min-h-0">
                  {event4?.image && (
                    <Image
                      src={`${BASE_URL}${event4.image}`}
                      alt="Event"
                      className="object-cover w-full h-full"
                      width={100}
                      unoptimized={true}
                      height={100}
                    />
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}