import { useRouter } from 'next/router';
import React from 'react';

interface GridProps {
  blogs?: any[];
}

const Grid: React.FC<GridProps> = (props) => {
  const blogs = props?.blogs && Array.isArray(props.blogs) && props.blogs.length ? props.blogs : false;
  const { locale } = useRouter();

  // Formateador de fecha: Convierte "2026-04-16T22:12:05" en "16 ABR. 2026"
  const formatDate = (dateString: string) => {
    try {
      if (!dateString) return '';
      const date = new Date(dateString);
      if (isNaN(date.getTime())) return dateString;
      
      const months = ['ENE', 'FEB', 'MAR', 'ABR', 'MAY', 'JUN', 'JUL', 'AGO', 'SEP', 'OCT', 'NOV', 'DIC'];
      return `${String(date.getDate()).padStart(2, '0')} ${months[date.getMonth()]}. ${date.getFullYear()}`;
    } catch (e) {
      return dateString;
    }
  };

  return (
    <div className="row my-12 tw-gap-y-6">
      {blogs &&
        blogs?.map((blog, key) => {
          const blogUrl = blog?.externalLink || '#';
          const imageUrl = blog?.image || '/images/blogs/banner-blog.webp';

          return (
            <div key={key} className="col-12 col-md-6">
              <article>
                <div className="card !tw-rounded-t-none">
                  <figure className="card-img-top overlay overlay-1 hover-scale !tw-rounded-t-none">
                    {/* ENLACE DE LA IMAGEN */}
                    <a href={blogUrl} target="_blank" rel="noopener noreferrer">
                      <img
                        src={imageUrl}
                        alt={blog?.title}
                        className="!tw-rounded-t-none tw-aspect-[3/2] tw-w-full tw-object-cover"
                        onError={(e) => {
                          (e.target as HTMLImageElement).src = '/images/blogs/banner-blog.webp';
                        }}
                      />
                    </a>
                    <figcaption>
                      <h5 className="from-top mb-0 tw-font-inter">
                        {locale === 'es' ? 'Leer Más' : 'Read More'}
                      </h5>
                    </figcaption>
                  </figure>

                  <div className="card-body border !tw-border-y-0 !tw-border-main-color">
                    <div className="post-header">
                      <h2 className="post-title h3 mt-1 mb-3">
                        {/* ENLACE DEL TÍTULO */}
                        <a
                          className="tw-font-ibm tw-text-lg md:tw-text-xl tw-text-main-dark !tw-font-semibold hover:tw-text-main-color tw-transition-colors"
                          href={blogUrl}
                          target="_blank"
                          rel="noopener noreferrer"
                        >
                          {blog?.title}
                        </a>
                      </h2>
                    </div>

                    <div className="post-content">
                      <p className="tw-font-ibm tw-text-secondary-dark tw-font-normal tw-text-lg tw-leading-[24px] md:tw-text-xl md:tw-leading-[36px] tw-line-clamp-4">
                        {blog?.excerpt}
                      </p>
                    </div>
                  </div>

                  <div className="card-footer border !tw-border-main-color">
                    <ul className="post-meta d-flex mb-0">
                      <li className="post-date tw-text-xs md:tw-text-sm tw-text-[#D4D4D4] tw-font-semibold tw-font-ibm">
                        <i className="uil uil-calendar-alt"></i>
                        <span> {formatDate(blog?.date)}</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </article>
            </div>
          );
        })}
    </div>
  );
};

export default Grid;