"use client";
import FactsSection from "@/components/facts-section";
import PageTitle from "@/components/shared/page-title";
import { urlFor } from "@/lib/sanity";
import { eventPost, getEventPosts } from "@/lib/services/event.service";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";
import { FaLocationDot } from "react-icons/fa6";

const Page = () => {
  const [events, setEvents] = useState<eventPost[]>([]);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const data = await getEventPosts();
        setEvents(data);
      } catch (error) {
        console.log("Failed to fetch Events", error);
      }
    };

    fetchPosts();
  }, []);
  return (
    <div className="">
      <PageTitle
        title="Upcomming Events"
        image="/assets/elephant.jpg"
        subtitle="Participate in our events to support our work"
      />
      <div className="py-24">
        {events.length > 0 &&
          events.map((item, idx) => (
            <div className="py-10 hover:bg-gray-100">
              <div className="lg:w-10/12 px-5 lg:px-0 mx-auto">
                <div className="grid lg:grid-cols-6 items-center justify-center lg:justify-between">
                  <div className="flex flex-col lg:flex-row lg:col-span-2 gap-10 items-center">
                    <div className="relative lg:w-32 w-full h-52  lg:h-32">
                      <Image
                        layout="fill"
                        alt="event"
                        objectFit="cover"
                        src={urlFor(item.postImage).url()}
                      />
                    </div>
                    <div className="space-y-5">
                      <h1 className="text-4xl font-bold">
                        {new Date(item.eventdate).toLocaleDateString("en-US", {
                          month: "short",
                          day: "2-digit",
                        })}
                      </h1>
                      <h2>
                       {`${new Date(item.eventdate).toLocaleDateString('en-US', {
                        year:'numeric'
                       })} / ${new Date(item.eventdate).toLocaleDateString('en-US', {
                        weekday:'long'
                       })} `} 
                      </h2>
                    </div>
                  </div>
                  <div className="space-y-5 flex flex-col lg:flex-row lg:justify-start justify-center text-center lg:col-span-3">
                    <h1 className="font-bold text-3xl">{item.title}</h1>
                    <div className="flex gap-5 justify-center lg:justify-start items-center">
                      <FaLocationDot />
                      <span>{item.location}</span>
                    </div>
                  </div>
                  <div className="flex justify-center py-10 lg:py-0">
                    <Link
                      className="px-10 rounded-full bg-colour-1 py-5 font-semibold"
                      href={`/events/${item.currentSlug}`}
                    >
                      View Event
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          ))}
      </div>
    </div>
  );
};

export default Page;