import React from 'react';
import { useRouter } from 'next/router'; // 1. Importamos el hook de rutas para saber el idioma
import ArticlesCarousel from '../blogs/ArticlesCarousel';

interface ArticlesCarouselWithtextProps {
  title?: string;
  preTitle?: string;
  text?: string;
  articles?: any[]; 
}

const ArticlesCarouselWithtext: React.FC<ArticlesCarouselWithtextProps> = (props) => {
  const { locale } = useRouter(); // 2. Obtenemos el idioma actual ('es' o 'en')
  const { title = '', text = '' } = props;
  
  // 3. Forzamos el uso de REVISTA HORIZONTE / HORIZONTE MAGAZINE ignorando el texto viejo del CMS
  const preTitle = (!props.preTitle || props.preTitle.toUpperCase() === 'BLOGS' || props.preTitle.toUpperCase() === 'BLOG')
    ? (locale === 'en' ? 'HORIZONTE MAGAZINE' : 'REVISTA HORIZONTE')
    : props.preTitle;
  
  const articles = props?.articles && Array.isArray(props.articles) && props.articles.length ? props.articles : false;

  return (
    <section className="wrapper bg-light">
      <div className="container py-5 py-md-10">
        <div className="row mygx-7 gy-7 gy-md-12">
          <div className="col-12">
            <p className="mb-2 tw-font-ibm tw-uppercase tw-font-semibold tw-text-base md:tw-text-lg tw-text-main-color tw-text-center">
              {preTitle}
            </p>
            <h2 className="mb-2 tw-font-ibm tw-text-3xl md:tw-text-5xl tw-font-normal tw-text-main-dark tw-text-center">
              {title}
            </h2>
            {text && <p className="mb-5 base-text">{text}</p>}
          </div>
          
          <div className="col-12">
            <div className="blog grid-view">
              {articles && <ArticlesCarousel articles={articles} />}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default ArticlesCarouselWithtext;