import React from 'react';
import PostCard from '@/Components/PostCard';
import { Separator } from '@/components/ui/separator';

export default function CategorySection({ section }) {
    if (!section || !section.posts || section.posts.length === 0) {
        return null;
    }

    return (
        <section className="mb-12">
            <h2 className="text-3xl font-extrabold mb-4 border-s-4 border-primary ps-4">
                {section.name}
            </h2>
            <Separator className="mb-6" />
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                {section.posts.map(post => (
                    <PostCard key={post.id} post={post} />
                ))}
            </div>
        </section>
    );
}