import React from 'react'
import styled from 'styled-components'

export interface AvatarProps {
  /**
   * url from where the image can be loaded
   */
  src?: string
  /**
   * additional css that you might want to use to style the avatar
   */
  css?: string
}

/**
 * A component that renders profile image as Avatar.
 */
export function Avatar({ src, css }: AvatarProps):JSX.Element {
  return (
    <>
      <StyledImage css={css} src={src}/>
    </>
  )
}

const StyledImage = styled.img<AvatarProps>`
  width: 60px;
  height: 60px;
  border-radius: 50px;
  object-fit: cover;

  ${(p:AvatarProps) => p.css}
`
