import React from 'react';
import serviceIcon1 from './asset/ic_service_1.png';
import serviceIcon2 from './asset/ic_service_2.png';
import serviceIcon3 from './asset/ic_service_3.png';
import serviceIcon4 from './asset/ic_service_4.png';
import { listServiceProduct } from '@/services/cms';
import { useRequest } from '@@/plugin-request/request';

const Services: React.FC = () => {
  const { data: servicesList } = useRequest(() => {
    return listServiceProduct(1, 100);
  });

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

export default Services;
