import React from 'react';
import { Autoplay, Navigation } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import ArticleCard from '@/components/organisms/blogs/ArticleCard';
import OtherCard from '@/components/organisms/blogs/OtherCard';

interface OtherBlogsProps {
  navigation?: any;
  articles?: any[]; // Ajusta el tipo según sea necesario
  maxPerView?: number;
}

const OtherBlogs: React.FC<OtherBlogsProps> = ({ articles, navigation = false, maxPerView = 3 }) => {
  const hasArticles = articles && Array.isArray(articles) && articles.length > 0;

  return (
    <div className="col-12">
      <div className="swiper-container article grid-view">
        {hasArticles && (
          <Swiper
            spaceBetween={30}
            modules={[Navigation, Autoplay]}
            navigation={navigation}
            autoplay={{ delay: 5000 }}
            slidesPerView={1}
            breakpoints={{ 768: { slidesPerView: 2 }, 992: { slidesPerView: maxPerView } }}
          >
            {articles.map((article, key) => (
              <SwiperSlide key={key}>
                <OtherCard
                  url={article.url}
                  image={article.image.url}
                  title={article.title}
                  category={article.category}
                  date={article.date}
                />
              </SwiperSlide>
            ))}
          </Swiper>
        )}
      </div>
    </div>
  );
};

export default OtherBlogs;