import { articles } from "@/data/home";

export default function ArticlesSection() {
  return (
    <div className="wb-frame" id="article">
      <section id="articles" className="blog-area blog-default-area" style={{ backgroundColor: "#FFFFFF" }}>
        <div className="container">
          <div className="row mb-4 align-items-center">
            <div className="col-6 text-right">
              <div className="section-title text-center">
                <h2
                  className="title mb-0"
                  style={{
                    fontWeight: 200,
                    direction: "ltr",
                    textAlign: "right",
                    fontSize: "25px",
                    letterSpacing: "0px",
                  }}
                >
                  مقاله ها
                </h2>
                <div className="desc">
                  <p
                    style={{
                      fontWeight: 0,
                      letterSpacing: "5px",
                      textAlign: "justify",
                      fontSize: "10px",
                      fontFamily: "montserrat",
                      color: "#C1C1C1",
                    }}
                  >
                    ARTICLES
                  </p>
                </div>
              </div>
            </div>
            <div className="col-6 text-start">
              <a className="btn-theme" href="#articles">
                <span style={{ fontWeight: 0 }}>مشاهده بیشتر</span>
              </a>
            </div>
          </div>
          <div className="row pt-2 pb-2">
            {articles.map((article) => (
              <div key={article.id} className="col-6 col-md-3">
                <div className="post-item mb-md-30">
                  <div className="thumb">
                    <a href="#">
                      <img src={article.image} alt={article.title} />
                    </a>
                  </div>
                  <div className="content">
                    <h3 className="title">
                      <a href="#">{article.title}</a>
                    </h3>
                    <p className="post-abstract">{article.excerpt}</p>
                    <div className="meta">
                      <div className="post-date">
                        <i className="WMi-calendar-1" />
                        <span>{article.date}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}