import React, { FC, memo } from 'react';
import { cn }              from '../../util/bem';
import { TextColorType }   from '../../util/global-props';
import './span.component.scss';

export type SpanPropsType = {
    className?: string;
    children: React.ReactNode;
    color?: TextColorType;
    weight?: 'bold' | 'normal';
    uppercase?: boolean;
    flex?: number;
    role?: string;
    underline?: boolean;

    tabularNumbers?: boolean;
}

const className = cn('span');

export const Span: FC<SpanPropsType> = memo((props) => (
    <div
        className={ className({
            weight:         props.weight,
            color:          props.color,
            uppercase:      props.uppercase,
            tabularNumbers: props.tabularNumbers,
            underline:      props.underline
        }, null, props.className) }
        style={ { flex: props.flex } }
        role={ props.role }
    >
        { props.children }
    </div>
));