import Deck from './deck';
import PropTypes from 'prop-types';
import classNames from 'classnames';

function DeckList({ decks, className }) {
  return (
    <div
      className={classNames(
        'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4',
        { [className]: className }
      )}
    >
      {decks.map(deck => (
        <Deck key={deck.id} deck={deck} />
      ))}
    </div>
  );
}

DeckList.propTypes = {
  decks: PropTypes.array.isRequired,
  className: PropTypes.string.isRequired
};

export default DeckList;
