import {styled} from '@mui/material';
import {IAvatar} from '../avatar.type';
import {AvatarSizeStyle as sizes} from './avatar-size.style';
import {AvatarOnlineSizeStyle as onlineSizes} from './avatar-online-size.style';
import {AvatarVerifiedSizeStyle as verifiedSizes} from './avatar-verified-size.style';
import User from 'herein-icon/user-01';
import BlueTick from 'herein-icon/check-verified-01';
import {rgba} from 'polished';

const Container = styled('div')<IAvatar>`
    aspect-ratio: 1/1;
    ${({size}) => sizes[size || 'md']};
    border-radius: ${({round}) => (round === 'full' ? '100rem' : round)};
    background-color: ${({theme}) => theme.palette.gray[100]};
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    ${({border, theme}) =>
        border &&
        `border: 0.75px solid ${rgba(
            theme.palette.border[900] as string,
            0.08,
        )}`};
`;

const Picture = styled('img')`
    width: 100%;
    object-fit: cover;
    aspect-ratio: inherit;
    border-radius: inherit;
`;

const Text = styled('span')`
    color: ${({theme}) => theme.palette.typography[600]};
    font-family: inherit;
    text-align: center;
    font-size: inherit;
    font-weight: 600;
    line-height: 1.5rem;
`;

const Icon = styled(User)`
    color: ${({theme}) => theme.palette.typography[600]};
    font-size: 140%;
`;

const Online = styled('div')<IAvatar>`
    background-color: ${({theme}) => theme.palette.success[500]};
    border-radius: 100rem;
    position: absolute;
    border: 1.5px solid ${({theme}) => theme.palette.white};
    ${({size}) => onlineSizes[size || 'md']};
`;

const Verified = styled(BlueTick)<IAvatar>`
    color: ${({theme}) => theme.palette.primary[500]};
    position: absolute;
    ${({size}) => verifiedSizes[size || 'md']};
`;

export const AvatarStyle = {
    Container,
    Picture,
    Text,
    Icon,
    Online,
    Verified,
};