'use client'
/*
  @author: Hemal
  File: RecentBlogPost.tsx
  Description: This file contains the RecentBlogPost component, which displays the recent blog post for a property.
  It also handles navigation to the blog page for a property.
*/
import { RootState } from '@/redux/slices';
import { AppDispatch } from '@/redux/store';
import { getBlogList } from '@/redux/thunks/Blog/blog.thunk';
import BlogPostItem from '@/src/components/BlogPost';
import useIsClient from '@/src/utils/customHooks/useIsClient';
import Routes from '@/src/utils/RouteConstants';
import Link from 'next/link';
import React, { useEffect } from 'react';
import { BlogItem } from '@/redux/types/blogTypes';
import { HomeContent } from '@/src/types/StaticContent/home.content.type';
import { useDispatch, useSelector } from 'react-redux';
import styles from './RecentBlogPost.module.scss';
// Define the static content type for the RecentBlogPost component
interface RecentBlogPostProps {
  RecentBlogPost: HomeContent['RECENT_BLOG_POST']
}
const RecentBlogPost: React.FC<RecentBlogPostProps> = ({ RecentBlogPost }) => {

  const dispatch = useDispatch<AppDispatch>();
  // Fetch the blog list from the API
  const { blogList } = useSelector((state: RootState) => state.blog);
  // Initialize the isClient state
  const isClient = useIsClient();

  // Fetch the blog list from the API
  useEffect(() => {
    dispatch(getBlogList({ page: 1, perPage: 3 }));
  }, []);

  // The recent blog post data is mapped to the component
  const RecentBlogPostData = {
    title: RecentBlogPost.TITLE,
    description: RecentBlogPost.DESCRIPTION,
    view_All: RecentBlogPost.VIEW_ALL
  }

  return (
    <>
      <section className={`${styles.RecentBlogPostWrapper} my-[30px] sm:my-[40px] md:my-[50px] xl:my-[60px] xxl:my-[80px] xxxl:my-[100px]`}>
        <div className={`container`}>
          {/* Title Content */}
          <div className={`flex flex-wrap lg:flex-nowrap justify-between items-center gap-3 sm:gap-4 md:gap-5 lg:gap-7`}>
            <h2 className={`!mb-0 lg:max-w-[650px]`}>{RecentBlogPostData.title}</h2>
            <p className={`!mb-0 text-grey475Color lg:max-w-[500px] xl:max-w-[600px] fs-18`}>{RecentBlogPostData.description}</p>
          </div>
          {
            isClient && blogList?.data?.length > 0 && (
              <>
                {/* Blogpost Wrap start */}
                <div className={`grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-6 xxl:gap-8 mt-5 sm:mt-7 lg:mt-9 xl:mt-16 xxxl:mt-18`}>
                  {blogList?.data?.map((blogItem: BlogItem, blogItemKey: number) => {
                    return (
                      <BlogPostItem key={blogItemKey} BlogPostContent={blogItem} isHomePage={true} />
                    )
                  })}
                </div>
                {/* Blogpost Wrap end */}
                {/* View More Button start */}
                <div className={`text-center mt-5 sm:mt-7 lg:mt-9 xl:mt-16 xxxl:mt-18`}>
                  <Link className={`PrimaryBtn w-max m-auto`} href={Routes.BLOG}>{RecentBlogPostData.view_All}</Link>
                </div>
                {/* View More Button end */}
              </>
            )
          }
        </div>
      </section>
    </>
  )
}

export default RecentBlogPost