import { memo } from 'react';
import { withTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';

function ArticleCard({ t, id, title, description, image, updated }) {
  return (
    <article className="flex flex-col justify-between max-w-[460px] w-full h-[526px] bg-primary-light rounded-[20px] shadow-light">
      <div>
        <img
          className="w-full h-[230px] mb-20 rounded-[20px] object-cover"
          src={image}
          alt={title}
          width="460"
          height="230"
          loading="lazy"
        />
        <h3 className="px-[15px] mb-20 text-xl leading-light font-medium">{title}</h3>
        <p className="px-[15px] text-lg text-common-layout font-light">{description}</p>
      </div>
      <div className="px-[15px] mb-[17px] flex justify-between items-center">
        <p className="text-lg text-common-secondary font-light">{updated}</p>
        <Link
          className="flex items-center justify-center w-[60px] h-[60px] text-secondary-main rounded-full border-2 border-secondary-main"
          to={`/blog/${id}`}
        >
          {t('article_btn')}
        </Link>
      </div>
    </article>
  );
}

export default withTranslation('homePage')(memo(ArticleCard));