import { useQuery } from "@tanstack/react-query";
import Link from "next/link";
import queryKeys from "../queryclientProvider/queryKeys";

export default function MermsRecentBlog(){

    const {data, isFetching, isError, error} = useQuery({
        queryKey: queryKeys.blog,
        queryFn: async () => {
            try {
                const blog_url = 'https://blogdata.chiefsoft.net/mermsblogdata/mermsemr';
                const res = await fetch(blog_url)
                const data = await res.json()
                return data
            }
            catch(e){
                return(e)
            }
        }
    })

    return <>
        <section id="blog-1" className="py-100 blog-section division">
            <div className="container">
                {/* SECTION TITLE */}
                <div className="row justify-content-center">
                    <div className="col-md-10 col-lg-9">
                        <div className="section-title mb-70">
                            {/* Title */}
                            <h2 className="s-50 w-700">Recent Articles from Our Blog</h2>
                            {/* Text */}
                            {/*<p className="s-21 color--grey">Ligula risus auctor tempus magna feugiat lacinia.</p>*/}
                        </div>
                    </div>
                </div>
                {isFetching ? 
                    <div className="">
                        <div className="">
                            <p className='text-mute text-center'>Loading...</p>
                        </div>
                    </div>
                    : isError ?
                    <div className="">
                        <div className="">
                            <p className='text-danger text-center'>{error.message}</p>
                        </div>
                    </div>
                    :
                    <>
                    {(data && data?.payload?.blogdata?.length > 0) ? 
                        <div className="row">
                            {data?.payload?.blogdata.map((item, index)=>{
                                if(index < 3){
                                    return (
                                        <div key={item.id || index} className="col-md-6 col-lg-4">
                                            <div className="blog-post mb-40 wow fadeInUp clearfix">
                                                {/* BLOG POST IMAGE */}
                                                <div className="blog-post-img mb-35">
                                                    <img 
                                                        className="img-fluid r-16" 
                                                        src={`${data?.payload?.image_url}/${item.meta_value}`}
                                                        alt="blog-post-image" 
                                                    />
                                                </div>
                                                {/* BLOG POST TEXT */}
                                                <div className="blog-post-txt">
                                                    {/* Post Tag */}
                                                    {/* <span className="post-tag color--red-400">Product News</span> */}
                                                    {/* Post Link */}
                                                    <h6 className="s-20 w-700">
                                                        <Link href={item.guid}> {item.post_title}</Link>
                                                    </h6>
                                                    {/* Text */}
                                                    <p dangerouslySetInnerHTML={{ __html: item.post_content.length > 250 ? item.post_content.substring(0, 250) + ' ...' : item.post_content.substring(0, 250) }} />
                                                    {/* Post Meta */}
                                                    <div className="blog-post-meta mt-20">
                                                        <ul className="post-meta-list ico-10">
                                                            <li><p className="p-sm w-500">Merms</p></li>
                                                            <li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
                                                            <li><p className="p-sm">{new Date(item.post_date).toDateString()}</p></li>
                                                        </ul>
                                                    </div>
                                                </div>	{/* END BLOG POST TEXT */}
                                            </div>
                                        </div>	
                                    )
                                }
                            })}
                        </div>
                    : 
                        <div className="">
                            <div className="">
                                <p className='text-mute text-center'>No Blog Found!</p>
                            </div>
                        </div>
                    }
                    </>
                }
            </div>    {/* End container */}
        </section>
    </>
}