import React from "react"
import PracticeCard from "./practice-card"

type IProps = {
  list: PracticeType[]
  select: (tag: string) => void
}

const PracticeList: React.FC<IProps> = props => {
  const { list, select } = props
  return (
    <section>
      <ul className="columns is-multiline">
        {list.map((item, index) => {
          return (
            <li
              className="column is-half-tablet  is-one-third-widescreen"
              key={item.title + index}
            >
              <PracticeCard {...{ ...item, select }} />
            </li>
          )
        })}
      </ul>
    </section>
  )
}

export default PracticeList