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

import { UserIcon } from '@redocly/theme/icons/UserIcon/UserIcon';

export type UserAvatarProps = {
  picture?: string;
  className?: string;
  height?: `var(${string})` | `${number}px`;
  width?: `var(${string})` | `${number}px`;
};

export function UserAvatar({
  picture,
  className,
  height = 'var(--user-menu-navbar-button-height)',
  width = 'var(--user-menu-navbar-button-width)',
}: UserAvatarProps): JSX.Element {
  return (
    <UserAvatarWrapper
      data-component-name="UserMenu/UserAvatar"
      className={className}
      height={height}
      width={width}
    >
      {picture ? <img src={picture} alt="profile" /> : <UserIcon />}
    </UserAvatarWrapper>
  );
}

const UserAvatarWrapper = styled.div<{ height: string; width: string }>`
  width: ${({ width }) => width};
  height: ${({ height }) => height};
  display: flex;
  overflow: hidden;
  position: relative;
  align-items: center;
  flex-shrink: 0;
  justify-content: center;
  user-select: none;

  font-family: var(--user-menu-avatar-font-family);
  font-size: var(--user-menu-avatar-font-size);
  line-height: var(--user-menu-avatar-line-height);
  font-weight: var(--user-menu-avatar-font-weight);

  border-radius: var(--user-menu-avatar-border-radius);
  background-color: var(--user-menu-avatar-bg-color);

  & > svg {
    width: ${({ width }) => `calc(${width} - 14px)`};
    height: ${({ height }) => `calc(${height} - 14px)`};
  }

  & > img {
    color: transparent;
    width: 100%;
    height: 100%;
    object-fit: cover;
    text-align: center;
    text-indent: 10000px;
  }
`;