import React from 'react';
import cx from 'classnames';

interface Props {
  size?: 'size-big' | 'size-medium' | 'size-small' | 'size-enormous',
  src?: string,
  hoverOpacity?:boolean,
}

export const Thumbnail = ({ size, src, hoverOpacity }: Props) => {
  const iconModifier = size ? ` c-thumbnail--${size}` : ' c-thumbnail--size-medium';
  const classes = cx(
    `c-thumbnail${iconModifier}`,
    { 'c-thumbnail--with-hover-opacity': hoverOpacity }
  );
  const iconSrc = src ? src : 'assets/images/user-placeholder.svg';
  return <img className={classes} src={iconSrc} />;
};