import './style.less'

import classnames from 'classnames'
import * as React from 'react'

const AVATAR_MAP = {
  male: 'https://cdn.llscdn.com/sprout/sprout-hybrid/avatar/imgBoy@3x.png',
  female: 'https://cdn.llscdn.com/sprout/sprout-hybrid/avatar/imgGirl@3x.png'
}

const DEFAULT_AVATAR = AVATAR_MAP.male
export enum genderList {
  male = 'male',
  female = 'female'
}

interface Props {
  className?: string
  url?: string
  gender?: genderList
  isPad?: boolean
}

Avatar.AVATAR_MAP = AVATAR_MAP

export default function Avatar(props: Props) {
  const { className, url, gender, isPad } = props
  const avatar = url || ((gender && AVATAR_MAP[gender]) || DEFAULT_AVATAR)
  return (
    <div
      className={classnames('ph-avatar', className, {
        'is-pad': isPad
      })}
    >
      <img src={avatar} alt="avatar" />
    </div>
  )
}