import { Level1 } from "../elements/depth/shadow";
import { styled, css } from "../../theme/util/helpers";
import { counterstrikeYellowColor } from "../../theme/theme/colors";
import React, { FC } from "react";

interface AvatarContainerProps {
    src?: string;
    width?: string;
    height?: string;
    borderRadius?: string;
}

// background-position: center center; better or nah?
export const AvatarContainerDiv = styled.div<AvatarContainerProps>`
    grid-area: avatar;
    width: 64px !important;
    height: 64px;
    border-radius: 64px;
    background-clip: padding-box;
    background-size: cover;
    border: 1px solid transparent;
    &:hover {
        border: 1px solid ${counterstrikeYellowColor};
    }

    ${props =>
        props.src &&
        css`
            background-image: url(${props.src});
        `}
    ${props =>
        props.width &&
        css`
            width: ${props.width}px !important;
        `}
    ${props =>
        props.height &&
        css`
            height: ${props.height}px;
        `}
    ${props =>
        props.borderRadius &&
        css`
            border-radius: ${props.borderRadius}px;
        `}

    ${Level1}
`;

// see if possible to reintroduce alt/title
export const AvatarContainer: FC<AvatarContainerProps> = props => {
    const { src } = props;

    return <AvatarContainerDiv src={src} />;
};

export { AvatarContainer as default, AvatarContainer as Avatar };