// @flow
import * as React from 'react';
import styled from 'styled-components';
import { observable } from 'mobx';
import { observer } from 'mobx-react';
import placeholder from './placeholder.png';

type Props = {
  src: string,
  size: number,
};

@observer
class Avatar extends React.Component<Props> {
  @observable error: boolean;

  static defaultProps = {
    size: 24,
  };

  handleError = () => {
    this.error = true;
  };

  render() {
    const { src, ...rest } = this.props;

    return (
      <CircleImg
        onError={this.handleError}
        src={this.error ? placeholder : src}
        {...rest}
      />
    );
  }
}

const CircleImg = styled.img`
  width: ${props => props.size}px;
  height: ${props => props.size}px;
  border-radius: 50%;
  border: 2px solid ${props => props.theme.white};
  flex-shrink: 0;
`;

export default Avatar;