import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

const MAX_DAY_LENGTH = 2;
const MAX_MONTH_LENGTH = 3;

const DateStack = ({ className, day, month }) => {
  const classNames = classnames('DateStack', { [className]: className });

  return (
    <div className={classNames}>
      <div className="DateStack-day display-medium">{day.substring(0, MAX_DAY_LENGTH)}</div>
      <div className="DateStack-month display-x-small">{month.substring(0, MAX_MONTH_LENGTH)}</div>
    </div>
  );
};

DateStack.propTypes = {
  day: PropTypes.string.isRequired,
  month: PropTypes.string.isRequired,
  className: PropTypes.string,
};

DateStack.defaultProps = {
  className: null,
};

export default DateStack;