/* eslint-disable-next-line */
import {getStrapiImageSize} from "../../libs/utils";
import CardBlog from "../card-blog/card-blog";
import HomeSectionBlogUne from "../home-section-blog-une/home-section-blog-une";

export interface HomeSectionBlogProps {
  posts: object[];
}

export function HomeSectionBlog({posts = []}: HomeSectionBlogProps) {
  const firstArticle = posts.length > 0 ? posts.slice(0, 1) : [];
  const otherArticles = posts.length > 0 ? posts.slice(1, posts.length) : [];
  return (
    <>
      <section className="container max-w-6xl relative mx-auto relative flex flex-col md:flex-row mb-10 h-auto">
        <div className="w-12/12 md:w-6/12 px-4 mb-4 md:mb-0 md:px-0 md:pr-2">
          <HomeSectionBlogUne item={firstArticle[0]} />
        </div>
        <div className="w-12/12 md:w-6/12 px-4 md:px-0 md:pl-2">
          {otherArticles.map((item: object, index: number) => (<CardBlog key={"home-card-blog-" + index}
                                                                         item={item} />))}
        </div>
      </section>
    </>
  );
}

export default HomeSectionBlog;