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

function ProductStars() {
  return (
    <div className="stars">
      <i className="fa fa-star" />
      <i className="fa fa-star" />
      <i className="fa fa-star" />
      <i className="fa fa-star" />
      <i className="fa fa-star-o" />
    </div>
  );
}

export default function ProductsSection() {
  return (
    <>
      <div className="wb-frame" id="product_last">
        <section
          id="products"
          className="product-area product-grid-area"
          style={{ backgroundColor: "#f5f5f5" }}
        >
          <div className="container-xxl position-relative">
            <div className="row align-items-center rtl">
              <div className="col-7 col-lg-6 text-right">
                <div className="section-title text-center">
                  <h2
                    className="title mb-1"
                    style={{
                      letterSpacing: 0,
                      fontWeight: 300,
                      textAlign: "right",
                      direction: "ltr",
                      fontSize: "25px",
                      color: "#252525",
                    }}
                  >
                    جدیدترین محصولات
                  </h2>
                  <div className="desc">
                    <p
                      style={{
                        letterSpacing: "5px",
                        fontWeight: 100,
                        textAlign: "justify",
                        fontSize: "10px",
                        fontFamily: "montserrat",
                        color: "#C1C1C1",
                      }}
                    >
                      LASTES PRODUCTS
                    </p>
                  </div>
                </div>
              </div>
              <div className="col-5 col-lg-6 text-start">
                <a className="btn-theme" href="#products">
                  <span style={{ letterSpacing: "0px", fontWeight: 0 }}>مشاهده بیشتر</span>
                </a>
              </div>
            </div>
            <div className="row">
              <div className="overflow-hidden position-relative-responsive py-3">
                <div className="swiper gallery-slider-container">
                  <div className="swiper-wrapper">
                    {products.map((product) => (
                      <div key={product.id} className="swiper-slide">
                        <div className="product-item">
                          <div className="product-thumb">
                            <a href="#">
                              <img src={product.image} alt={product.title} />
                            </a>
                            <div className="product-action">
                              <a className="btn-theme" title={product.contactOnly ? "تماس با فروشگاه" : "افزودن به سبد خرید"} href="#">
                                {product.contactOnly ? "تماس با فروشگاه" : "افزودن به سبد خرید"}
                              </a>
                            </div>
                          </div>
                          <div className="product-info">
                            <h3 className="title mb-0">
                              <a href="#">{product.title}</a>
                            </h3>
                            <ProductStars />
                            <div className="prices">
                              {product.contactOnly ? (
                                <div className="mt-auto">
                                  <span className="callus">تماس بگیرید</span>
                                </div>
                              ) : (
                                <div className="mt-auto">
                                  <span className="price">{product.price}</span>
                                  <span className="toman">تومان</span>
                                </div>
                              )}
                            </div>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                  <div className="swiper-btn-wrap">
                    <div className="swiper-btn-prev">
                      <i className="fa fa-angle-left" style={{ lineHeight: 0 }} />
                    </div>
                    <div className="swiper-btn-next">
                      <i className="fa fa-angle-right" style={{ lineHeight: 0 }} />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>

    </>
  );
}