import * as React from "react"
import { Container, Icon } from "@/components"
import * as styles from "./index.module.scss"

interface IProps {
  cooperationFlow: CooperationFlowContent
}

const CooperationFlow: React.FC<IProps> = ({ cooperationFlow }) => {
  return (
    <div
      className={`${styles.cooperationFlow} ${
        cooperationFlow.className ? styles[cooperationFlow.className] : ""
      }`}
    >
      <Container>
        {cooperationFlow.className ? (
          <h2>{cooperationFlow.title}</h2>
        ) : (
          <h1>{cooperationFlow.title}</h1>
        )}

        <div className={styles.outer}>
          {cooperationFlow.flow.map((list, index) => (
            <div className={styles.inner} key={index}>
              <div className={styles.flow}>
                <div className={styles.flowNumber}>
                  {list.name ? list.name : `Step ${index + 1}`}
                </div>
                <h5>{list.describe}</h5>
                {/*{list.list && (*/}
                {/*  <ul>*/}
                {/*    {list.list.map((value) => <li>{value}</li>)}*/}
                {/*  </ul>*/}
                {/*)}*/}
              </div>
              <Icon
                name="chevron-right"
                className={`${
                  index == cooperationFlow.flow.length - 1 ? styles.hidden : ""
                }`}
              />
            </div>
          ))}
        </div>
      </Container>
    </div>
  )
}

export default CooperationFlow