import EducationalArticleCard, {
    type EducationalArticle,
} from './educational-article-card';

export default function EducationalGuides({
    articles,
}: {
    articles: EducationalArticle[];
}) {
    if (!articles.length) return null;
    return (
        <section
            aria-label="Guias para preparar o investimento"
            className="space-y-5"
        >
            <h2 className="text-2xl font-bold">Descubra onde investir</h2>
            <div className="grid gap-6 md:grid-cols-2">
                {articles.map((article) => (
                    <EducationalArticleCard
                        key={article.href}
                        article={article}
                    />
                ))}
            </div>
        </section>
    );
}