"use client";

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

interface ServiceType {
  id: number;
  fileUrl?: string | null;
  icon?: string | null;
  title?: string | null;
  desc?: string | null;
  order?: number | null;
  status?: string | null;
  createTime?: Date | null;
  updateTime?: Date | null;
}

const Service: React.FC = () => {
  const [serviceList, setServiceList] = useState<ServiceType[] | null>(null);

  useEffect(() => {
    fetchServiceProducts().then(({ data: list }) => {
      const records = [...list?.records];
      setServiceList(records);
    });
  }, []);

  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}>
            {serviceList?.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>
  );
};

export default Service;
