/* eslint-disable jsx-a11y/alt-text */
import React, { Component } from "react"
import "./index.scss"

export default class Description extends Component {
  state = {
    list: [
      {
        icon: "https://cdn.julyedu.com/mlCourse/m/des_icon_1.png",
        text: "0门槛交互式授课，学习像聊天一样有趣；",
      },
      {
        icon: "https://cdn.julyedu.com/mlCourse/m/des_icon_2.png",
        text: "原理部分结合图片和例子，内容讲解详细；",
      },
      {
        icon: "https://cdn.julyedu.com/mlCourse/m/des_icon_3.png",
        text: "代码逐行讲解，在线编程，QQ群答疑，学会为止；",
      },
      {
        icon: "https://cdn.julyedu.com/mlCourse/m/des_icon_4.png",
        text: "精编课程习题，结合面试场景，夯实理论基础；",
      },
      {
        icon: "https://cdn.julyedu.com/mlCourse/m/des_icon_5.png",
        text: "精选项目干货，结合所学，手把手指导。",
      },
    ],
  }

  render() {
    const { list } = this.state
    return (
      <div className={"description"}>
        <img
          className={"left"}
          src="https://cdn.julyedu.com/h5_python_class/left__decorate.png"
          alt=""
        />
        <img
          className={"right"}
          src="https://cdn.julyedu.com/h5_python_class/right__decorate.png"
          alt=""
        />
        <p className={"title"}>课 / 程 / 特 / 色</p>
        <img src={"https://cdn.julyedu.com/mlCourse/m/ml-introduce.png"} />
        <ul className={"des-list"}>
          {list.map((item, index) => {
            return (
              <li key={index}>
                <img src={item.icon} alt="" />
                <span>{item.text}</span>
              </li>
            )
          })}
        </ul>
      </div>
    )
  }
}
