'use client';

import {Col, Row} from 'react-bootstrap';
import {useTranslations} from 'next-intl';
import {FaNewspaper} from 'react-icons/fa';

import ArticleCard from '@/components/Articles/ArticleCard';
import type {Article} from '@/types/article';

interface ArticlesLiesSectionProps {
  articles: Article[] | undefined;
  locale: string;
}

/** Bloc « Articles du Mag » d'une fiche : les articles publiés qui lui sont accrochés en Kasour. */
export default function ArticlesLiesSection({articles, locale}: ArticlesLiesSectionProps) {
  const t = useTranslations('Common');

  if (!articles || articles.length === 0) return null;

  return (
    <div className="tk-section-card" data-testid="articles-lies-section">
      <div className="tk-section-card-header">
        <h2 className="tk-section-card-title">
          <span className="tk-section-card-title-icon tk-section-card-title-icon-orange">
            <FaNewspaper />
          </span>
          {t('articles_lies_title')}
        </h2>
      </div>
      <div className="tk-section-card-body">
        <Row className="g-3">
          {articles.map(article => (
            <Col key={article.id} xs={12} md={6} lg={4}>
              <ArticleCard article={article} locale={locale} />
            </Col>
          ))}
        </Row>
      </div>
    </div>
  );
}