import React from 'react';
// import { useTranslations } from 'next-intl';
import Link from 'next/link';
import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
import { i18nText } from '../../../../i18nKeys';
import { fetchBlogPosts } from '../../../../lib/contentful/blogPosts';

export default async function News({params: {locale}}: { params: { locale: string } }) {
    unstable_setRequestLocale(locale);
    const t = await getTranslations('Main');
    const { data, total } = await fetchBlogPosts({preview: false, sticky: true})

    return (
        <div className="main-articles">
            <div className="b-inner">
                <h2 className="title-h2">{t('news')}</h2>
                <div className="row">
                    {data.map((item, i) => (
                        <div className="col-lg-4 col-md-6 col-sm-6" key={'news' + i}>
                            <div className="b-article">
                                <div className="b-article__image">
                                    <img className="" src={item.listImage?.src} alt={item.listImage?.alt}/>
                                </div>
                                <div className="b-article__inner">
                                    <div className="b-article__title">{item.title}</div>
                                    <div className="b-article__text">
                                        {item.excerpt}
                                    </div>
                                    <Link href={`/${locale}/blog/${item.slug}`} className="b-article__link">
                                        {i18nText('readMore', locale)}
                                        <img className="" src="/images/chevron-forward.svg" alt=""/>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    ))}

                </div>
            </div>
        </div>
    );
};