import React, {FC} from 'react';

import {IBadge} from './badge.type';
import {BadgeStyle as S} from './styles/badge.style';
import {BadgeDotIconComponent as DotIcon} from './parts/badge-dot-icon.component';
import {BadgeCloseIconComponent as CloseIcon} from './parts/badge-close-icon.component';
import {BadgeAvatarComponent as Avatar} from './parts/badge-avatar.component';

export const BadgeComponent: FC<IBadge> = (props) => {
    const {
        text,
        dotIcon,
        closeIcon,
        color,
        avatar,
        startIcon,
        endIcon,
        jsxElement,
    } = props;

    return (
        <S.Badge dir='auto' {...props}>
            {startIcon && startIcon}
            {avatar && <Avatar avatar={avatar} />}
            {dotIcon && <DotIcon color={color} />}
            {text}
            {jsxElement && jsxElement}
            {closeIcon?.show && (
                <div data-test='closeIcon' {...closeIcon.props}>
                    <CloseIcon color={color} />
                </div>
            )}
            {endIcon && endIcon}
        </S.Badge>
    );
};