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

export default class Description extends Component {
  render() {
    return (
      <div className={"description"}>
        <img
          className={"left"}
          src="https://cdn.julyedu.com/h5_python_class/left.png"
          alt=""
        />
        <img
          className={"right"}
          src="https://cdn.julyedu.com/h5_python_class/right.png"
          alt=""
        />
        <p className={"title"}>课 / 程 / 介 / 绍</p>
        <p className={"sub__title"}>
          对话式交互教学+课后实操，17节课全面掌握Python基础语法
        </p>
        <img src={"https://cdn.julyedu.com/h5_python_class/diannao.png"} />
        {this.props.list.map((item, index) => {
          return <DesList item={item} key={index}></DesList>
        })}
      </div>
    )
  }
}

function DesList(props) {
  const { url, title, subTitle } = props.item
  return (
    <div className={"des__container"}>
      <img src={url} alt="" />
      <div>
        <p className={"item__title"}>{title}</p>
        <p className={"item__sub"}>{subTitle}</p>
      </div>
    </div>
  )
}
