import BlogContent from "@/components/homepage/blog-content";
import { Button, DataFetchingErrorMessage, NavigationLink } from "@/components/ui";
import { getPosts } from "@/actions/get-posts";
import { Gear } from "@/components/ui/icons";
import { getFeaturedPost } from "@/lib/utils";
import { BlogPost } from "../blog/types";

const Blog = async () => {
  const { data, error } = await getPosts();
  const featuredPost = getFeaturedPost(data);
  const otherPosts = data.filter((post) => post.slug !== featuredPost?.slug);
  const posts = [featuredPost, ...otherPosts.slice(0, 2)].filter(Boolean) as BlogPost[];

  return (
    <section className="py-10 md:py-20">
      <div className="contigo-container">
        <h2 className="contigo-title contigo-title-homepage">Novedades de salud para vos</h2>
        {error ? (
          <DataFetchingErrorMessage error={error} />
        ) : (
          <>
            <BlogContent posts={posts} />
            <NavigationLink path="/blog">
              <Button className="mx-auto">Más artículos</Button>
            </NavigationLink>
          </>
        )}
      </div>
    </section>
  );
};

export default Blog;