import { React, css, color } from '../../common';

export interface IImageProps {
  url: string;
  width?: number;
  title?: string;
}

export const Image = (props: IImageProps) => {
  const { url, width, title } = props;
  const styles = {
    base: css({
      display: 'inline-block',
      boxSizing: 'border-box',
      background: color.format(-0.03),
      marginTop: 10,
      padding: 8,
      paddingBottom: 5,
      borderRadius: 5,
      marginRight: 10,
    }),
    labelOuter: css({
      boxSizing: 'border-box',
      width,
      PaddingX: 5,
      paddingBottom: 5,
      Flex: 'horizontal-spaceBetween',
    }),
    img: css({
      width,
      borderRadius: 5,
    }),
    text: css({
      fontSize: 11,
    }),
  };
  return (
    <div {...styles.base}>
      <div {...styles.labelOuter}>
        <div {...styles.text}>{title}</div>
        <div {...styles.text}>{url}</div>
      </div>
      <img src={url} {...styles.img} />
    </div>
  );
};
