import { css } from "@emotion/react";
import styled from "@emotion/styled";
import { StyledAvatarProps } from "./Avatar";

const StyledAvatar = styled.div<StyledAvatarProps>`
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-transform: uppercase;
  line-height: 1;
  background-color: #5f49fd;
  color: #fff;

  ${({ size }) => {
    return (
      size &&
      css`
        width: ${size}px;
        height: ${size}px;
        font-size: ${size / 2}px;
      `
    );
  }}

  ${({ variant, imgSrc }) => {
    return (
      variant === "image" &&
      imgSrc &&
      css`
        background-image: url(${imgSrc});
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
      `
    );
  }}
`;

export default StyledAvatar;