import { bool, string } from 'prop-types';
import React, { forwardRef } from 'react';
import { BadgeProps } from './badges.types';

const Badge = forwardRef<SVGSVGElement, BadgeProps>(
    ({ disableValue = false, children, ...props }, ref) => {
        const digitLength = children ? 16 + (children.length - 1) * 6 : 6,
            disableValueClassName =
                disableValue || (!children ?? true) ? 'disable-value' : '';

        return (
            <svg
                {...props}
                className={`m3 m3-badge ${props.className ?? ''}${disableValueClassName}`.trimEnd()}
                height={'16px'}
                ref={ref}
                width={`${digitLength}px`}
            >
                {children && (
                    <text x={'50%'} y={'50%'}>
                        {parseInt(children) > 999 ? '999+' : children}
                    </text>
                )}
            </svg>
        );
    },
);

Badge.propTypes = {
    children: string,
    disableValue: bool,
};

export { Badge };
