import * as React from "react"
import styled from "styled-components"

import getConfig from "jamplay-common/remote-config"

const ProfilePicture = styled.div`
  border-radius: 50%;
  background-size: cover;
  background-position: center center;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  background-clip: padding-box;
  width: inherit;
  height: inherit;
`

export const UserProfilePicture = (props) => {
  const { publicRuntimeConfig } = getConfig()
  const backgroundImageURL =
    props.src ||
    `${
      publicRuntimeConfig.staticFolder
    }/ui-assets/images/profile-picture/default-pic-profile-male.jpg`

  return (
    <ProfilePicture
      {...props}
      style={Object.assign(
        { backgroundImage: "url(" + backgroundImageURL + ")" },
        props.style
      )}
    />
  )
}

export const AuthorProfilePicture = (props) => (
  <ProfilePicture
    {...props}
    style={Object.assign(
      {
        backgroundImage:
          "url(" +
          (props.src ||
            `${
              getConfig().publicRuntimeConfig.staticFolder
            }/ui-assets/images/profile-picture/default-pic-editor.jpg`) +
          ")"
      },
      props.style
    )}
  />
)