import React from 'react';
import './tag.css';
import Iconsvg from '../Icon/Icon';

type Props = {
    content: string,
    size? : 'default' | 'small' | 'medium' | 'large',
    variant?: 'default' |'primary' | 'secondary',
    rounded?: boolean,
    close?: boolean,
    onClose?: () => void;
}

const Tag = (props:Props) => {
    const {content, size, variant, rounded, close, onClose} = props;
    const tagSize = size ? `tag-size-${size}` : ''
    const colorVarient = variant ? `tag-bg-${variant}` : ''
    const tagRounded = rounded ? "tag-rounded" : ''

    return (
        <span className={`tag ${tagSize} ${colorVarient} ${tagRounded}`}>
            {content}
            {close && <i onClick={onClose}>
                <Iconsvg name="closeSolid"/>
            </i>} 

        </span>
    );
};

export default Tag;