import React from "react";
import Image from "next/image";
import styles from "./services.module.css";
import { fetchServiceProducts } from "@/lib/cms";

export default async function Service() {
  const { data: servicesList } = await fetchServiceProducts();

  return (
    <div className={styles.services}>
      <div className={styles["services-container"]}>
        <div className={styles["service-title"]}>
          <div className={styles["title-content"]}>
            <div className={styles.content1}>服务与产品</div>
            <div className={styles.content2}>以战略为牵引，以组织、人才为支撑，助力实现卓越经营，打造幸福企业</div>
          </div>
        </div>
        <div className={styles["service-details"]}>
          <div className={styles.row}>
            {servicesList?.records?.map((item, index) => {
              return (
                <div className={styles["col-md-4"]} key={index}>
                  <a href={item.fileUrl}>
                    <div className={styles["card-item"]}>
                      <div className={styles["flex-row"]}>
                        <Image alt="product-image" width={80} height={80} src={item.icon} className={styles.icon} />
                        <div className={styles.content3}>{item.title}</div>
                      </div>
                      <div className={styles.content4}>{item.desc}</div>
                    </div>
                  </a>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}
