import classNames from 'classnames';
import './HistoryCard.scss';

export interface HistoryCardProps {
  /**
   * Is this the principal call to action on the page?
   */
  variant: 'primary' | 'secondary' | 'danger' | 'success' | 'warning';
  /**
   * Details to display the title
   */
  title: any;
  /**
   * State of the approval entity
   */
  state: 'approved' | 'rejected' | 'review';
  /**
   * Version of the approval entity
   */
  version: string | number;
  /**
   * Comment message to display on the history card
   */
  comment: string;
  /**
   * profileShortName is to display short name inside the profile avatar
   */
  profileShortName: string;
}

const HistoryCard = ({
  variant,
  title,
  state,
  comment,
  profileShortName,
  version,
  ...props
}: HistoryCardProps) => {
  return (
    <div
      className={classNames(
        'history-card-container',
        `history-card-container--${variant}`
      )}
      {...props}
    >
      <div className="title">
        <div className="profile">
          <div className={classNames('avatar', `avatar--${variant}`)}>
            {profileShortName}
          </div>

          <div className="title-text">{title}</div>
        </div>
        <div className={classNames('state', `state--${variant}`)}>
          {state}&nbsp;{version}
        </div>
      </div>

      <div className="comment-container">
        <div className="heading">Comments:</div>
        <div className="comment">{comment}</div>
      </div>
    </div>
  );
};

export default HistoryCard;