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

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

import { type MetricValue } from '../types';

export type MetricProps = MetricValue & {
  divider?: boolean;
  loading?: boolean;
};

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