import React from 'react';
import classNames from 'classnames/bind';

import styles from './CircleThumb.scss';
import { ReactComponent as IconCheck } from '@assets/img/svg/ico_check_pink.svg';

const cx = classNames.bind(styles);

interface IOwnProps {
  width: number;
  height: number;
  thumbSrc?: string;
  border?: number;
  isOfficial?: boolean;
  officialWidth?: number;
  officialHeight?: number;
};

const CircleThumb: React.FC<IOwnProps> = ({
  thumbSrc,
  width,
  height,
  border,
  isOfficial,
  officialWidth,
  officialHeight,
}) => {
  return (
    <span className={cx('circle_thumb', `border_${border}`)} style={{ width: `${width}px`, height: `${height}px` }}>
      <img src={thumbSrc || '/static/img/svg/user_profile.svg'} alt="" width={width} height={height} className={cx('thumb')} />
      {!!isOfficial && (
        <div className={cx('official_mark')}>
          <span className={cx('blind')}>official</span>
          <IconCheck
            className={cx('ico_check')}
            width={officialWidth}
            height={officialHeight}
          />
        </div>
      )}
    </span>
  );
};

export default CircleThumb;
