import React, {FC} from 'react';

import {TagStyle as S} from './styles/tag.style';
import {ITag, ITagAvatar, ITagClose, ITagCount, ITagTitle} from './tag.type';

const Tag: FC<ITag> = (props) => {
    return <S.Container {...props} />;
};

const Title: FC<ITagTitle> = ({title, ...rest}) => {
    return (
        <S.Title className='title' {...rest}>
            {title}
        </S.Title>
    );
};

const Close: FC<ITagClose> = (props) => {
    return <S.Close className='close' {...props} />;
};

const Count: FC<ITagCount> = (props) => {
    return <S.Count className='count' {...props} />;
};

const Avatar: FC<ITagAvatar> = (props) => {
    return <S.Avatar {...props} />;
};

/**
 *
 * @author Ali M. Sadeghi
 *
 */
export const TagComponent = Object.assign(Tag, {
    Title,
    Close,
    Count,
    Avatar,
});