/**
 * @deprecated Use `ProgressBar` from `@material-hu/components/design-system/ProgressIndicators/ProgressBar` instead.
 * API differences: local uses `value` (0–100 number) + `tooltip` + `orientation`;
 * Hugo uses `title`, `description`, `current`/`total` props and derives the percentage internally.
 */
import LinearProgress from '@material-hu/mui/LinearProgress';
import Stack from '@material-hu/mui/Stack';
import { SxProps } from '@material-hu/mui/styles';
import Tooltip from '@material-hu/mui/Tooltip';
import Typography from '@material-hu/mui/Typography';

type Props = {
  tooltip?: string;
  value: number;
  orientation?: 'vertical' | 'horizontal';
  sx?: SxProps;
};

const LinearProgressWithLabel = ({
  value,
  tooltip = '',
  orientation = 'vertical',
  sx,
}: Props) => {
  const isVertical = orientation === 'vertical';
  return (
    <Tooltip title={tooltip}>
      <Stack
        sx={{
          flexDirection: isVertical ? 'column' : 'row-reverse',
          alignItems: 'center',
          width: 100,
          ...sx,
        }}
      >
        <Typography
          variant="body2"
          color="text.secondary"
          sx={{ minWidth: 40, whiteSpace: 'nowrap', fontSize: '12px', ml: 2 }}
        >
          {value}%
        </Typography>
        <LinearProgress
          variant="determinate"
          sx={{ width: '100%' }}
          value={value}
        />
      </Stack>
    </Tooltip>
  );
};

export default LinearProgressWithLabel;