import React from 'react';
import { DEFAULT_PAGE_SIZE } from '../../constants/common';
import {getLanguages} from "../../actions/tags";
import {fetchBlogPosts} from "../../lib/contentful/blogPosts";
import {fetchBlogPostCategories} from "../../lib/contentful/blogPostsCategories";
import {BlogPostsList} from "./BlogPostsList";
import {BlogPostCategories} from "./BlogPostCategories";

type PostsProps = {
    basePath: string;
    locale: string;
    pageSize?: number;
    currentCat: string;
    page?: number
};

export const BlogPosts = async ({ basePath = '/', locale, pageSize = DEFAULT_PAGE_SIZE, currentCat = '', page = 1 }: PostsProps) => {
    const languages = await getLanguages(locale);
    const {data, total} = await fetchBlogPosts({preview: false, category: currentCat, page: page})
    const cats = await fetchBlogPostCategories(false)

    return (
        <div className="b-news">
            <div className="b-news__header">
                <div className="b-inner">
                    <h1 className="title-h1">
                        Mentorship, Career <br/>
                        Development & Coaching
                    </h1>
                    <div className="wrap-text">
                        <p className="">The ins-and-outs of building a career in tech, gaining <br/> experience</p>
                        <p className="">from a mentor, and getting your feet wet with coaching.</p>
                    </div>
                    <div className="b-news__header__img">
                        <img className="" src="/images/news-top.png" alt=""/>
                    </div>
                </div>
            </div>
            <BlogPostCategories
                slug={currentCat}
                cats={cats}
                basePath={basePath}
                locale={locale}
            />
            <BlogPostsList
               data={data}
               total={total}
               basePath={basePath}
               locale={locale}
            />
        </div>
    )
}