import React from 'react';

interface ArticleCardProps {
  url: string;    // URL externa del post de WordPress
  image: string;  // Imagen destacada del post
  title: string;
  category?: {
    name: string;
    url: string;
  };
  date: string;
}

const ArticleCard: React.FC<ArticleCardProps> = ({ url, image, title, date }) => {
  // Sincronización: Tomamos directamente 'url' que viene del Swiper
  const blogUrl = url && url !== '' ? url : '#';
  const imageUrl = image && image !== '' ? image : '/images/blogs/banner-blog.webp';

  const formatDate = (dateString: string) => {
    try {
      if (!dateString) return '';
      const parsedDate = new Date(dateString);
      if (isNaN(parsedDate.getTime())) return dateString;
      
      const months = ['ENE', 'FEB', 'MAR', 'ABR', 'MAY', 'JUN', 'JUL', 'AGO', 'SEP', 'OCT', 'NOV', 'DIC'];
      return `${String(parsedDate.getDate()).padStart(2, '0')} ${months[parsedDate.getMonth()]}. ${parsedDate.getFullYear()}`;
    } catch (e) {
      return dateString;
    }
  };

  return (
    <article className="tw-h-full tw-flex tw-flex-col tw-justify-between">
      <div>
        <figure className="overlay overlay-1 hover-scale mb-5 tw-overflow-hidden tw-rounded-lg">
          {/* ENLACE EN LA IMAGEN */}
          <a href={blogUrl} target="_blank" rel="noopener noreferrer" className="tw-block">
            <img 
              src={imageUrl} 
              alt={title} 
              className="tw-w-full tw-aspect-[3/2] tw-object-cover tw-rounded-lg tw-min-h-[214px] tw-max-h-[214px]" 
              onError={(e) => {
                (e.target as HTMLImageElement).src = '/images/blogs/banner-blog.webp';
              }}
            />
          </a>
        </figure>
        
        <div className="post-header">
          <h2 className="post-title h3 mt-1 mb-3">
            {/* ENLACE EN EL TÍTULO */}
            <a
              className="tw-text-main-dark hover:tw-text-main-color tw-font-ibm tw-font-semibold tw-text-lg md:tw-text-xl tw-transition-colors"
              href={blogUrl}
              target="_blank"
              rel="noopener noreferrer"
            >
              {title}
            </a>
          </h2>
        </div>
      </div>

      <div className="post-footer tw-mt-4">
        <ul className="post-meta mb-0">
          <li className="post-date">
            <span className="tw-font-ibm tw-text-sm tw-text-secondary-dark">
              {formatDate(date)}
            </span>
          </li>
        </ul>
      </div>
    </article>
  );
};

export default ArticleCard;