"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";
import { getPillarPostBySlug, pillarPost } from "@/lib/services/pillar.service";

const Page = ({ params }: { params: { slug: string } }) => {
  const [pillar, setPillar] = useState<pillarPost>();

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

    fetchPosts();
  }, []);
  return (
    <div className="">
      <PageTitle
        title="Our Pillars"
        image="/assets/elephant.jpg"
        subtitle="Learn Our Story and Get Involved"
      />
      {pillar && (
        <div className="py-24 px-5 lg:px-0 lg:w-10/12 mx-auto">
           <div className="space-y-5 pb-8 border-b">
                  <Link
                    className="flex gap-2 items-center font-semibold"
                    href="/our-pillars"
                  >
                    <IoArrowUndoSharp className="text-colour-1" />
                    All Pillars
                  </Link>
                  <h1 className="text-3xl font-semibold">{pillar.title}</h1>
                  
                </div>
          <div className="py-10 max-w-full prose">
            <PortableText value={pillar.content} />
          </div>
        </div>
      )}
    </div>
  );
};

export default Page;