"use client";
import PageTitle from "@/components/shared/page-title";
import Image from "next/image";
import Link from "next/link";
import { IoArrowUndoSharp } from "react-icons/io5";
import { MdOutlineAccessTime } from "react-icons/md";
import { RiMoneyDollarCircleLine } from "react-icons/ri";
import { FaLocationDot } from "react-icons/fa6";
import { MdCategory } from "react-icons/md";
import { TbPhoneCall } from "react-icons/tb";
import { FaUser } from "react-icons/fa";
import { MdOutlineAlternateEmail } from "react-icons/md";
import { useEffect, useState } from "react";
import { eventPost, getEventPostBySlug } from "@/lib/services/event.service";
import { PortableText } from "next-sanity";
import { urlFor } from "@/lib/sanity";

const Page = ({ params }: { params: { slug: string } }) => {
  const [event, setEvent] = useState<eventPost>();

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const data = await getEventPostBySlug(params.slug);
        setEvent(data);
      } catch (error) {
        console.log("Failed to fetch Event", error);
      }
    };

    fetchPosts();
  }, []);
  return (
    <div className="">
      <PageTitle
        title="Upcomming Events"
        image="/assets/elephant.jpg"
        subtitle="Participate in our events to support our work"
      />
      {event && (
        <>
          <div className="py-24 lg:w-10/12 mx-auto">
            <div className="grid lg:grid-cols-3 px-5 lg:px-0 gap-16 pb-16 border-b">
              <div className="col-span-2">
                <div className="space-y-5 pb-8 border-b">
                  <Link
                    className="flex gap-2 items-center font-semibold"
                    href="/events"
                  >
                    <IoArrowUndoSharp className="text-colour-1" />
                    All Events
                  </Link>
                  <h1 className="text-3xl font-semibold">{event.title}</h1>
                  <div className="flex gap-3 items-center text-sm">
                    <MdOutlineAccessTime className="text-colour-1" />
                    {new Date(event.eventdate).toLocaleDateString("en-US", {
                      year: "numeric",
                      month: "short",
                      day: "2-digit",
                    })}
                    <span>from {event.eventtime}</span>
                  </div>
                </div>
                <div className="py-10  max-w-full prose">
                  <PortableText value={event.content} />
                </div>
              </div>
              <div className="hidden lg:block">
                <div className="min-h-96 relative">
                  <Image
                    alt="image"
                    layout="fill"
                    objectFit="cover"
                    src={urlFor(event.postImage).url()}
                  />
                </div>
              </div>
            </div>
            <div className="flex border flex-col lg:flex-row gap-10 justify-between p-7">
              <div className="flex items-center gap-2">
                <MdOutlineAccessTime className="text-colour-1 h-7 w-7" />
                {new Date(event.eventdate).toLocaleDateString("en-US", {
                  year: "numeric",
                  month: "short",
                  day: "2-digit",
                })}
              </div>
              <div className="flex items-center gap-2">
                <RiMoneyDollarCircleLine className="text-colour-1 h-7 w-7" />{" "}
                {event.eventfee}
              </div>
              <div className="flex items-center gap-2">
                <FaLocationDot className="text-colour-1 h-7 w-7" />{" "}
                {event.location}
              </div>
              
            </div>
          </div>
          <div className="bg-colour-1">
            <div className="lg:w-10/12 px-5 lg:px-0 space-y-10 py-10 mx-auto">
              <h1 className="text-3xl font-bold">ORGANIZER</h1>
              <div className="flex font-semibold flex-col lg:flex-row gap-10 justify-between">
                <div className="flex items-center gap-2">
                  <FaUser className="text-white h-7 w-7" /> {event.organizer}
                </div>
                <div className="flex items-center gap-2">
                  <TbPhoneCall className="text-white h-7 w-7" /> {event.contactnumber}
                </div>
                <div className="flex items-center gap-2">
                  <MdOutlineAlternateEmail className="text-white h-7 w-7" />{" "}
                  {event.email}
                </div>
              </div>
            </div>
          </div>
        </>
      )}
    </div>
  );
};

export default Page;