import React, { useEffect, useState } from 'react';
import blogs from '../../api/blogs';
import Link from 'next/link';
import Image from 'next/image';
import { useRouter } from 'next/router';
import { useTranslations } from 'next-intl';
import axios from 'axios';

const AllBlogSection = (props) => {
    const { locale } = useRouter();
    const t = useTranslations("Blog");
    const ClickHandler = () => {
        window.scrollTo(10, 0);
    }
    const [researches, setResearches] = useState([]);
    useEffect(() => {
        axios.get('https://dokan-backend.d-menus.com/research').then((res) => {
            setResearches(res.data.allResearches);
            console.log(res.data.allResearches);
        })
    }, []);

    return (
        <section className="wpo-blog-section section-padding">
            <div className="container">
                <div className="wpo-blog-wrap">
                    <div style={{ direction: "ltr" }} className="row align-items-center">
                        <div style={{ textAlign: `${locale === "ar" ? "center" : ""}` }} className="col-lg-5 col-md-8">
                            <div className="wpo-section-title">
                                <span style={locale === "ar" ? { fontSize: "2.2rem" } : {}}>{t("blog_title")}</span>
                                <h2>{t("blog_subTitle")}</h2>
                            </div>
                        </div>
                        <div className="col-lg-5 offset-lg-2 col-md-4">
                            {/* <div className="see-more-btn">
                                <Link onClick={ClickHandler} href="/blog-list">{t("blog_seaAll")}</Link>
                            </div> */}
                        </div>
                    </div>
                    <div className="wpo-blog-items">
                        <div className="row">
                            {
                                researches.length > 0 && researches.map((blog, Bitem) => (
                                    <div className="col col-xl-4 col-lg-6 col-md-6 col-12" key={Bitem}>
                                        <div className="wpo-blog-item">
                                            <div className="wpo-blog-img">
                                                <img src={blog.image} alt="" />
                                            </div>
                                            <div className="wpo-blog-content">
                                                <h2><Link onClick={ClickHandler} href={`/blog-list/blog-details/${blog.id}`}>
                                                    {locale === "ar" ? blog.research_name_ar : blog.research_name_en}
                                                </Link></h2>
                                                <Link onClick={ClickHandler} className="b-btn" href={`/blog-list/blog-details/${blog.id}`}>{t("blog_read_more")}</Link>
                                            </div>
                                        </div>
                                    </div>
                                ))
                            }
                            {researches.length === 0 && blogs.map((blog, Bitem) => (
                                <div className="col col-xl-4 col-lg-6 col-md-6 col-12" key={Bitem}>
                                    <div className="wpo-blog-item">
                                        <div className="wpo-blog-img">
                                            <Image src={blog.screens} alt="" />
                                        </div>
                                        <div className="wpo-blog-content">
                                            <h2><Link onClick={ClickHandler} href={`/blog-list/blog-details/${blog.id}`}>{t(blog.title)}</Link></h2>
                                            <Link onClick={ClickHandler} className="b-btn" href={`/blog-list/blog-details/${blog.id}`}>{t("blog_read_more")}</Link>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                    <div className={`visible-text ${props.vClass}`}>
                        <h2>Blog</h2>
                    </div>
                </div>
            </div>
        </section>
    )
}

export default AllBlogSection;
