/** @format */

import _ from 'lodash';
import React from 'react';
import styled from 'styled-components';

const ImgWrapper = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;

  & > div {
    position: relative;
    overflow: hidden;
  }

  .img,
  img {
    width: 100%;
    height: 100%;
  }
`;

interface ProfileProps {
  size?: {
    width: number;
    height: number;
  };
  img: string;
  shape?: string;
}

const Profile = (props: ProfileProps) => {
  const { size, img, shape = 'round' } = props;
  const styleBase = {
    width: '100%',
    height: '100%',
  };

  const style = _.merge(styleBase, size);

  const defaultImg =
    'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/8526e32d-e32b-4782-982d-b2490c80bd0b.png';

  return (
    <ImgWrapper style={style}>
      <div
        className="img"
        style={{ borderRadius: shape === 'round' ? '50%' : 0 }}
      >
        <img src={img || defaultImg} />
      </div>
    </ImgWrapper>
  );
};

export default Profile;