import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';

import HuSkeleton from '@material-hu/components/design-system/Skeleton';
import HuTitle from '@material-hu/components/design-system/Title';

export type MetricProps = {
  metric?: number | null;
  title: string;
  tooltip: string;
  divider?: boolean;
  loading?: boolean;
};

export const Metric = ({
  metric,
  title,
  tooltip,
  divider = false,
  loading = false,
}: MetricProps) => {
  return (
    <Stack
      sx={{
        flex: 1,
        gap: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
      }}
    >
      {metric != null && (
        <HuTitle
          variant="XL"
          title={metric.toString()}
          copetin={title}
          copetinTooltip={tooltip}
          sx={{
            gap: 1,
          }}
        />
      )}
      {loading && (
        <Stack
          sx={{
            gap: 1,
            width: '100%',
          }}
        >
          <HuSkeleton
            width="100%"
            height="16px"
          />
          <HuSkeleton
            width="100%"
            height="56px"
          />
        </Stack>
      )}
      {divider && (
        <Divider
          orientation="vertical"
          variant="middle"
          flexItem
        />
      )}
    </Stack>
  );
};

export default Metric;