aramesh-backend/frontend/src/components/ArticleCard.tsx

import React from 'react'
import { Link } from 'react-router-dom'
import { ArrowLeftIcon, ClockIcon } from 'lucide-react'
import type { Article } from '../data/site'

export function ArticleCard({ article }: { article: Article }) {
  return (
    <Link
      to={`/blog/${article.slug}`}
      className="group flex h-full flex-col border border-ivory/10 bg-char transition-all duration-300 ease-out hover:-translate-y-2 hover:border-copper/40 hover:shadow-lift transform-gpu will-change-transform focus:outline-none focus-visible:ring-2 focus-visible:ring-copper"
      aria-label={`خواندن مقاله ${article.title}`}
    >
      <div className="overflow-hidden">
        <img
          src={article.image}
          alt={`تصویر مقاله ${article.title}`}
          className="h-52 w-full object-cover transition-transform duration-300 ease-out group-hover:scale-105 transform-gpu"
        />
      </div>
      
      <div className="flex flex-1 flex-col p-8">
        <p className="text-xs font-light text-copper">{article.category}</p>
        
        <h3 className="mt-4 text-lg font-bold leading-9 text-ivory transition-colors duration-300 ease-out group-hover:text-copper">
          {article.title}
        </h3>
        
        <p className="mt-4 mb-8 text-sm font-light leading-[2.2rem] text-ivory/55">
          {article.excerpt}
        </p>
        
        <div className="mt-auto flex items-center justify-between border-t border-ivory/10 pt-6 text-xs font-light text-ivory/50">
          <span className="flex items-center gap-4">
            <span>{article.date}</span>
            <span className="flex items-center gap-1.5">
              <ClockIcon className="h-3.5 w-3.5" />
              {article.read}
            </span>
          </span>
          <span className="flex items-center gap-2 text-copper">
            ادامه مطلب
            <ArrowLeftIcon className="h-3.5 w-3.5 transition-transform duration-300 ease-out group-hover:-translate-x-1.5" />
          </span>
        </div>
      </div>
    </Link>
  )
}