import { type FC } from 'react';

import Skeleton from '@material-hu/mui/Skeleton';
import Typography from '@material-hu/mui/Typography';

const EMPTY_VALUE = '—';
const VALUE_SKELETON_WIDTH = 64;

type MetricValueProps = {
  ready: boolean;
  value: string | null;
};

const MetricValue: FC<MetricValueProps> = props => {
  const { ready, value } = props;

  if (!ready) return <Skeleton width={VALUE_SKELETON_WIDTH} />;

  return (
    <Typography
      variant="globalM"
      fontWeight="fontWeightSemiBold"
    >
      {value ?? EMPTY_VALUE}
    </Typography>
  );
};

export default MetricValue;
