import { memo } from 'react';
import ArticleCard from './ArticleCard';

function ArticleCardsList({ title, cards, ...attrs }) {
  return (
    <section {...attrs}>
      <h2 className="mb-56 text-[48px] font-semibold">{title}</h2>
      <div className="flex gap-20">
        {cards.map((card) => (
          <ArticleCard {...card} key={card.id} />
        ))}
      </div>
    </section>
  );
}

export default memo(ArticleCardsList);
