import * as React from "react"
import * as styles from "./index.module.scss"

interface IProps<T> {
  listData: T[]
  className?: string
  children: (item: T) => React.ReactNode
}

const ListLayout: <T>(props: IProps<T>) => React.ReactElement = ({
  listData,
  className,
  children,
}) => {
  return (
    <div
      className={`${styles.listContent} ${className ?? ""}`}
      data-role="list-content"
    >
      {listData &&
        listData.length > 0 &&
        listData.map((item, index: number) => (
          <div className={styles.listLoop} data-role="list-loop" key={index}>
            {children(item)}
          </div>
        ))}
    </div>
  )
}

export default ListLayout