import './IconCard.scss';
import Icon from '../Icon';

export interface IconCardProps {
  /**
   * iconName | name of the icon to be displayed on top
   */
  iconName: string;
  /**
   * title | title to be displayed for the card
   */
  title: string;
  /**
   * size | size of the card | Icon size will be adjusted automatically
   */
  size?: 'x-small' | 'small' | 'medium' | 'large';
  children?: any;
}

const IconCard = ({
  iconName = 'manual',
  title = 'Basic card',
  size = 'medium',
  children = '',
}: IconCardProps) => {
  const getIconHeightWidth = () => {
    if (size === 'x-small') {
      return 24;
    } else if (size === 'small') {
      return 28;
    } else if (size === 'medium') {
      return 38;
    } else if (size === 'large') {
      return 46;
    }
    return 38;
  };
  const iconHeightWidth = getIconHeightWidth();

  return (
    <div className={`storybook-icon-card-container card--${size}`}>
      <div className={`icon-wrapper icon-wrapper--${size}`}>
        <div className={`icon-position`}>
          <Icon
            name={iconName}
            height={iconHeightWidth}
            width={iconHeightWidth}
          />
        </div>
      </div>
      <div className={`card-title card-title--${size}`}>{title}</div>
      <div className={`card-content-wrapper card-content-wrapper--${size}`}>
        <div className={`card-content card-content--${size}`}>{children}</div>
      </div>
    </div>
  );
};
export default IconCard;