import React from 'react'
import { Link } from 'react-router-dom'
import { getImageUrl } from 'educoder'

export default ({ list }) => {
  return (
    <div className="user_navlist">
      <div className="user_navlist_black">
        <ul className="black_nav_list">
          {list.map(item =>
            <li className="welcome_shixun_index" data-type="rep" key={item.id}>
              <span className="black_nav_span clearfix font-12">
                <Link to={"/shixuns?id=" + item.id + "&type=rep"}>
                  {item.name}
                </Link>
                <img src={getImageUrl("images/educoder/icon/downarrowsmall-right.svg")} className="fr mt15 transform-90" />
              </span>
              <ul className="user_navlist_white" >
                {
                  item.sub_repertoires.map((i) => {
                    return (
                      <div className="clearfix mt20 mb5 pb10 navlistpanel-line" key={i.id}>
                        <div className="little-title clearfix welcome_shixun_index little-titles" data-type="sub">
                          <Link to={"/shixuns?id=" + i.id + "&type=sub&palce=" + item.id}> {i.name} </Link>
                        </div>
                        {
                          i.tags.map((t, e) => {
                            return (
                              <Link className="welcome_shixun_index" to={"/shixuns?id=" + t.id + "&type=tag&palce=" + item.id} data-type="tag" key={t.id}>{t.name}</Link>
                            )
                          })
                        }
                      </div>
                    )
                  })
                }
              </ul>
            </li>
          )}
        </ul>
      </div>
    </div>
  )
}