import React from "react"
import PropTypes from "prop-types"
import cx from "classnames"
import Cards from "./cards"

const DEFAULT = "bg-white border rounded p-4"

function Card({ children, border, ...props }) {
  const className = cx(props.className, DEFAULT, {
    "border-gray-200": border,
    "border-white": !border,
  })

  return (
    <div {...props} className={className}>
      {children}
    </div>
  )
}

Card.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node,
  ]),
  border: PropTypes.bool,
  className: PropTypes.string,
}

export { Cards }
export default Card
