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 { useTranslation } from 'next-i18next';
import blog from "../../utils/constant.utils";

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">
                <SectionTitle
                    subTitle={t('sectionSubTitle')}
                    Title={t('sectionTitle')}
                />
                <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 > 109
                                                                ? blogTexts.description.substring(0, 109) + '...'
                                                                : 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;