import React from "react"
import PropTypes from "prop-types"

function Cards({ children, ...props }) {
  return (
    <div className="flex flex-wrap -mx-2" {...props}>
      {React.Children.map(children, child => (
        <div className="w-1/3 px-2 mb-4" key={child}>
          {child}
        </div>
      ))}
    </div>
  )
}

Cards.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node,
  ]),
}

export default Cards
