import Image from "next/image";
import Link from "next/link";
import { ARTICLES } from "@/lib/site";

export default function Articles() {
  return (
    <section id="articles" className="art-section">
      <div className="container art-head">
        <span className="art-kicker">آخرین مقالات</span>
        <Link className="art-more" href="/#articles">
          مشاهده بیشتر
        </Link>
      </div>
      <div className="art-grid-wrap">
        <ul className="art-grid">
          {ARTICLES.map((a) => (
            <li className="art-item" key={a.title}>
              <a href={a.href} target="_blank" rel="noopener noreferrer">
                <div className="art-image">
                  <Image src={a.img} alt={a.title} width={600} height={500} />
                  <div className="art-image-overlay" />
                </div>
                <div className="art-details">
                  <span className="art-category">{a.category}</span>
                  <div className="art-bottom">
                    <span className="art-date">{a.date}</span>
                    <h6>{a.title}</h6>
                  </div>
                </div>
              </a>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}