'use client';

import React from 'react';
import {useTranslations} from 'next-intl';
import {FaQuoteLeft} from 'react-icons/fa';

import {bioParagraphs} from '@/utils/bioText';

interface BioSectionProps {
  /** Bio telle que saisie en Kasour/Extranet, HTML compris. */
  bio?: string | null;
}

/**
 * Bloc « Bio » d'une fiche de l'annuaire : la bio épurée de tout HTML, en paragraphes.
 * Ne rend rien quand la bio est vide.
 */
export default function BioSection({bio}: BioSectionProps) {
  const t = useTranslations('Common');
  const paragraphs = bioParagraphs(bio);

  if (paragraphs.length === 0) {
    return null;
  }

  return (
    <div className="tk-section-card" data-testid="bio-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-green">
            <FaQuoteLeft />
          </span>
          {t('bio_title')}
        </h2>
      </div>
      <div className="tk-section-card-body">
        {paragraphs.map((paragraph, index) => (
          <p key={index}>{paragraph}</p>
        ))}
      </div>
    </div>
  );
}