import React from 'react';
import Typography from '@mui/material/Typography';
import { formatNumberAsMetric } from '@reltio/mdm-sdk';
import classnames from 'classnames';
import { useStyles } from './styles';
export var Legend = function (_a) {
    var minValue = _a.minValue, maxValue = _a.maxValue, colors = _a.colors, width = _a.width;
    var styles = useStyles({
        colors: colors,
        width: width
    });
    return (React.createElement("div", { "data-reltio-id": "map-chart-legend", className: styles.legendContainer },
        React.createElement(Typography, { "data-reltio-id": "max-legend-metric", className: classnames(styles.legendLabel, styles.alignTop) }, formatNumberAsMetric(maxValue)),
        React.createElement("div", { className: styles.legendBar }),
        React.createElement(Typography, { "data-reltio-id": "min-legend-metric", className: classnames(styles.legendLabel, styles.alignBottom) }, formatNumberAsMetric(minValue))));
};
