"use client";

import { eventPost, getEventPosts } from "@/lib/services/event.service";
import { motion, useInView } from "framer-motion";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import { BiSolidDonateHeart } from "react-icons/bi";
import { FaLongArrowAltRight } from "react-icons/fa";
import { FaLocationDot } from "react-icons/fa6";

const EventsSection = () => {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true });

  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="bg-gray-100">
      <motion.div
        ref={ref}
        initial={{ opacity: 0, y: 100 }}
        animate={isInView ? { opacity: 1, y: 0 } : {}}
        transition={{ duration: 0.5, delay: 0.5 }}
        className="lg:w-10/12 px-5 lg:px-0 py-20 grid lg:grid-cols-5 lg:mx-auto"
      >
        <div className="mb-16 lg:col-span-2 space-y-10 lg:border-colour-1 lg:border-l-8 lg:p-8 flex flex-col">
          <h1 className="text-5xl lg:text-6xl lg:w-1/2 custom-oswald font-semibold">
            Upcomming Events
          </h1>
          <Link href="/events" className="flex">
            <div className="px-10 hover:bg-colour-1 hover:text-white border-2 border-colour-1 py-5 font-semibold">
              View All Events
            </div>
          </Link>
        </div>
        <div className="flex flex-col lg:col-span-3 px-5 lg:px-10">
          {events.length > 0 &&
            events.map((item, idx) => (
              <div className="gap-8 border-b py-5 hover:border-colour-1 flex flex-col md:flex-row group items-center">
                <span className="inline-block w-24 h-24 p-6 bg-colour-1 rounded-full items-center justify-center">
                  <span className="text-center text-white">
                    <h1 className="text-3xl font-bold">
                      {new Date(item.eventdate).toLocaleDateString("en-US", {
                        day: "2-digit",
                      })}
                    </h1>
                    <h2>
                      {new Date(item.eventdate).toLocaleDateString("en-US", {
                        month: "short",
                      })}
                    </h2>
                  </span>
                </span>

                <div className="space-y-4">
                  <h1 className="text-lg text-center md:text-start group-hover:text-colour-1 font-semibold custom-oswald">
                    {item.title}
                  </h1>
                  <div className="flex flex-col md:flex-row justify-between items-center gap-10">
                    <h2 className=" group-hover:font-semibold">
                      {item.eventtime}
                    </h2>
                    <div className="flex items-center gap-3">
                      <FaLocationDot />
                      <span>{item.location}</span>
                    </div>

                    <Link href={`/events/${item.currentSlug}`} className="font-semibold text-colour-1">
                      View
                    </Link>
                  </div>
                </div>
              </div>
            ))}
        </div>
      </motion.div>
    </div>
  );
};

export default EventsSection;