import styled from "styled-components";

const Avatar = styled.span<{
	image?: string | null;
	initials: string;
	color?: string;
	fontSize?: number;
	bold?: boolean;
}>`
  border-radius: 50%;
  background: ${(p) => `url(${p.image})`}, ${(p) => (p.color ? p.color : p.theme.colors.uiBackground03)};
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: center;

  &:after {
    content: ${(p) => !p.image && JSON.stringify(p.initials)};
    color: ${(p) => (p.bold ? p.theme.colors.textHighEmphasis : p.theme.colors.textMediumEmphasis)};
    ${(p) => p.theme.textStyle.uiXS};
    font-size: ${(p) => (p.fontSize ? `${p.fontSize}px` : "12px")};
  }
`;

const AvatarWrapper = styled.div<{ size?: number }>`
  width: ${(p) => (p.size ? `${p.size}px` : "32px")};
  height: ${(p) => (p.size ? `${p.size}px` : "32px")};

  ${Avatar} {
    width: ${(p) => (p.size ? `${p.size}px` : "32px")};
    height: ${(p) => (p.size ? `${p.size}px` : "32px")};
  }
`;

export { AvatarWrapper, Avatar };
