"use client";

import { getPillarPosts, pillarPost } from "@/lib/services/pillar.service";
import { motion, useInView } from "framer-motion";
import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import { BiSolidDonateHeart } from "react-icons/bi";

const CauseSection = () => {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true });
  const [pillars, setPillars] = useState<pillarPost[]>([]);

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

    fetchPosts();
  }, []);
  return (
    <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 mt-36  lg:mx-auto"
    >
      <div className="mb-16">
        <h1 className="text-4xl lg:text-5xl custom-oswald font-semibold">
          Our Pillars
        </h1>
      </div>
      <div className="grid xl:grid-cols-3 md:grid-cols-2 gap-10">
        {pillars.length > 0 &&
          pillars.map((item, idx) => (
            <Link href={`/our-pillars/${item.currentSlug}`}>
              <div className="border-4 hover:border-colour-1 items-center p-6 group justify-between flex border-dashed">
                <h1 className="text-2xl group-hover:font-semibold">
                {item.title}
                </h1>
                <BiSolidDonateHeart className="h-8 w-8 group-hover:text-colour-1 text-gray-300" />
              </div>
            </Link>
          ))}
      </div>
    </motion.div>
  );
};

export default CauseSection;