/** @jsx jsx */
import * as React from "react";
import css from "@styled-system/css";
import { jsx } from "@emotion/core";
import styled from "@emotion/styled";
import { variant } from "styled-system";
import { GapSizes } from "../../components/utils/System";

type AvatarTypes = "primary" | "secondary" | "outlined";

// Avatar
export interface AvatarProps {
    url: string;
    size: GapSizes,
    border?: boolean;
}

const getSize = (gap: GapSizes): number => {
    switch (gap) {
        case 'small':
            return 1
        case 'medium':
            return 2
        case 'large':
            return 3
        default:
            break;
    }
    return 0
}
const getBorder = (border: boolean)  => {
    if (border) {
        return {
            border: '1px solid',
            borderColor: 'highlight'
        }
    }
}


const Avatar: React.FC<AvatarProps> = ({
    url,
    size,
    border = false
}): React.ReactElement => {
    return (
        <div
            css={
                css({   
                    outline: 'none',
                    fontSize: 1,        
                    height: getSize(size), 
                    width: getSize(size),
                    borderRadius: '50%',
                    backgroundImage: `url("${url}")`,
                    backgroundSize: 'cover',
                    backgroundRepeat: 'no-repeat',
                    backgroundPosition: 'center center',
                    display: 'inline-block',
                    ...getBorder(border)

                })
            }>
        </div>
    );
};

export default Avatar;