import styled from 'styled-components';

type AvatarWrapperProps = {
  size: number;
  cursor?: string;
  margin?: [number, number, number, number];
};

export const AvatarWrapper = styled.div<AvatarWrapperProps>`
  width: ${({ size }) => `${size}px`};
  height: ${({ size }) => `${size}px`};
  cursor: ${({ cursor }) => cursor || 'default'};
  border-radius: 50%;
  overflow: hidden;

  .sb-avatar {
    display: block !important;
  }

  margin: ${({ margin }) =>
    margin && `${margin[0]}px ${margin[1]}px ${margin[2]}px ${margin[3]}px`};
`;