"use client";

import useApi from "@/hooks/useApi";
import { getImageUrl } from "@/utils/imageUrl";
import React, { useEffect, useState } from "react";

const BottomBannerSection = () => {
  const { get } = useApi();
  const [bannerData, setBannerData] = useState([]);
  
  useEffect(() => {
    const fetchBannerData = async () => {
      try {
        const { data } = await get("/post/getAllpost");
        console.log("ALL POSTS 👉", data);

        const filteredData = data.filter(
          (i) => i?.postCategoryId?._id == "66e7fe97925a5553c32f81ca"
        );
       
        setBannerData(filteredData);
      } catch (error) {
        console.log(error);
      }
    };
    fetchBannerData();
  }, []);

  return (
    <section className="bottom-banner-section py-8 md:py-12 lg:py-16 bg-gray-50">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
          {bannerData?.map((item) => (
            <div
              className="group relative bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 ease-in-out hover:-translate-y-1 border border-gray-100 overflow-hidden"
              key={item?._id}
            >
              <div className="relative p-6 md:p-8 text-center h-full flex flex-col items-center">
                <div className="mb-4 p-3 bg-blue-50 rounded-lg group-hover:bg-blue-100 transition-colors duration-300">
                  <div className="w-12 h-12 flex items-center justify-center">
                    <img
                      loading="lazy"
                      className="w-8 h-8 object-contain transition-transform duration-300 group-hover:scale-110"
                      src={getImageUrl(item?.postImage || item?.gallaryImage)}
                      alt={item?.postTitle}
                      onError={(e) => {
                        e.target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMjAiIGZpbGw9IiNEOEU5RkYiLz4KPHBhdGggZD0iTTIwIDI2VjE0TTE0IDIwSDI2IiBzdHJva2U9IiMxRTQwQTciIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=';
                      }}
                    />
                  </div>
                </div>

                <h4 className="text-lg font-semibold text-gray-900 mb-3 line-clamp-2">
                  {item?.postTitle}
                </h4>
                <p className="text-gray-600 text-sm leading-relaxed flex-grow line-clamp-3">
                  {item?.postSubTitle}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default BottomBannerSection;