import React from 'react';

interface OtherCardProps {
  url: string;
  image: string;
  title: string;
  category: {
    name: string;
    url: string;
  };
  date: string;
}

const OtherCard: React.FC<OtherCardProps> = ({ url, image, title, category, date }) => {
  return (
    <article>
      <figure className="overlay overlay-1 hover-scale  mb-5">
        <a href={url || '#'}>
          <img src={image} alt={title} className="tw-min-h-[214px] tw-max-h-[214px] tw-object-cover" />
        </a>
      </figure>
      <div className="post-header">
        <div className="post-category -text-line tw-h-[18px]">
          {(category && category?.name && (
            <a
              href={category?.url || '#'}
              className="hover tw-text-main-color tw-text-sm tw-font-semibold tw-font-ibm"
              rel="category"
            >
              · {category?.name}
            </a>
          )) ||
            ''}
        </div>
        <h2 className="post-title h3 mt-1 mb-3">
          <a
            className="tw-text-main-dark hover:tw-text-main-color tw-font-ibm tw-font-semibold tw-text-lg md:tw-text-xl"
            href={url || '#'}
          >
            {title}
          </a>
        </h2>
      </div>
      <div className="post-footer">
        <ul className="post-meta mb-0">
          <li className="post-date">
            {' '}
            <span className="tw-font-ibm tw-text-sm tw-text-[#D4D4D4]">
              {' '}
              <i className="uil uil-calendar-alt"></i>
              {date}
            </span>
          </li>
        </ul>
      </div>
    </article>
  );
};

export default OtherCard;