import React from "react";
import blogs from '../../api/blogs'
import Link from "next/link";
import SectionTitle from "../SectionTitle/SectionTitle";
import Image from "next/image";
import blog from "../../utils/constant.utils";
import { useTranslation } from 'next-i18next';

const ClickHandler = () => {
    window.scrollTo(10, 0);
}

const BlogSection = () => {
    const { t } = useTranslation('blog');
    return (
        <section className="wpo-blog-section section-padding" id="blog">
            <div className="container">
                <div className="wpo-blog-items">
                    <div className="row">
                        {blog.map((blog) => {
                            const blogTexts = t(`posts.${blog.slug}`, { returnObjects: true });
                            return (
                                <div className="col col-lg-4 col-md-6 col-12" key={blog.id}>
                                    <div className="wpo-blog-item">
                                        <div className="wpo-blog-img">
                                            <Image src={blog.screens} alt={blogTexts.title} />
                                        </div>
                                        <div className="wpo-blog-content">
                                            <h2>
                                                <Link
                                                    onClick={ClickHandler}
                                                    href={'/blog/[slug]'}
                                                    as={`/blog/${blog.slug}`}
                                                >
                                                    {blogTexts.title}
                                                </Link>
                                            </h2>
                                            <div className="entry-details">
                                                <p
                                                    dangerouslySetInnerHTML={{
                                                        __html:
                                                            blogTexts.description?.length > 110
                                                                ? blogTexts.description.substring(0, 110) + '...'
                                                                : blogTexts.description,
                                                    }}
                                                ></p>


                                                <Link
                                                    className="more"
                                                    onClick={ClickHandler}
                                                    href={'/blog/[slug]'}
                                                    as={`/blog/${blog.slug}`}
                                                >
                                                    {t('knowMore')}
                                                </Link>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>
            </div>
        </section>
    );
}

export default BlogSection;