import styled from '@emotion/styled';

type OwnProps = {
  user?: {
    email: string;
    first_name: string;
    last_name: string;
    tenant: { id: string; name: string };
  };
};

const StyledContainer = styled.button`
  display: flex;
  height: 60px;
  background: inherit;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: 10px;
  margin-right: 10px;
  font-size: 14px;
  margin-bottom: -2px;
  cursor: pointer;
  border: 0;
`;

const StyledInfoContainer = styled.div`
  display: flex;
  flex-direction: column;
`;

const StyledEmail = styled.div`
  display: flex;
`;

const StyledTenant = styled.div`
  display: flex;
  text-transform: capitalize;
  font-weight: bold;
`;

const StyledAvatar = styled.div`
  display: flex;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background: black;
  font-size: 20px;
  color: white;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 16px;
  flex-shrink: 0;
`;

function ProfileContainer({ user }: OwnProps) {
  return (
    <StyledContainer>
      <StyledAvatar>
        {user?.first_name
          .split(' ')
          .map((n) => n[0])
          .join('')}
      </StyledAvatar>
      <StyledInfoContainer>
        <StyledEmail>{user?.email}</StyledEmail>
        <StyledTenant>{user?.tenant.name}</StyledTenant>
      </StyledInfoContainer>
    </StyledContainer>
  );
}

export default ProfileContainer;