"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 RecentBlogs from "@/components/shared/recent-blogs";
import { useEffect, useState } from "react";
import { blogPost, getBlogPostBySlug } from "@/lib/services/blog.service";
import { urlFor } from "@/lib/sanity";
import { PortableText } from "next-sanity";

const Page = ({ params }: { params: { slug: string } }) => {
  const [insight, setInsight] = useState<blogPost>();

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const data = await getBlogPostBySlug(params.slug);
        setInsight(data);
      } catch (error) {
        console.log("Failed to fetch Insight", 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 lg:w-10/12 mx-auto">
        <div className="grid lg:grid-cols-3 px-5 lg:px-0 gap-16 ">
          <div className="lg:col-span-2">
            {insight && (
              <>
                <div className="lg:min-h-96  relative">
                  <Image
                    alt="image"
                    layout="fill"
                    objectFit="cover"
                    src={urlFor(insight.postImage).url()}
                  />
                </div>
                <div className="space-y-5 py-8 border-b">
                  <h1 className="text-3xl font-semibold">{insight.title}</h1>
                  <div className="flex gap-3 items-center text-sm">
                    <MdOutlineAccessTime className="text-colour-1" />
                    {new Date(insight.dateCreated).toLocaleDateString("en-US", {
                      year: "numeric",
                      month: "short",
                      day: "2-digit",
                    })}
                  </div>
                </div>
                <div className="py-10 max-w-full prose">
                  <PortableText value={insight.content} />
                </div>
              </>
            )}
          </div>
          <div>
            <RecentBlogs />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Page;