import React, { FC } from 'react';
import cx from 'classnames';
import { formatNumber, formatPercentage } from 'src/utils/formatNumber';

export const CLASSNAME = 'Metric';
export const EMPTY_CHAR = '-';

export interface Props {
    value?: number | null;
    size?: 'lg' | 'sm';
    className?: string;
    format?: 'number' | 'percentage'
    testId?: string;
}

interface MetricComponent extends FC<Props> {
    CLASSNAME: string
}

const formatValue = (value: number, format: 'number' | 'percentage') => (
    format === 'number' ? formatNumber(value) : formatPercentage(value)
);

const Metric: MetricComponent = ({ value, size, className, testId, format = 'number' }) => (
    <div className={cx(CLASSNAME, size && `${CLASSNAME}-${size}`, className)} data-testid={testId}>
        {value === undefined || value === null ? EMPTY_CHAR : formatValue(value, format)}
    </div>
);

Metric.CLASSNAME = CLASSNAME;

export default Metric;