import Typography from '@mui/material/Typography';
import { STATISTICS_MODES } from 'app/configs/consts';
import clsx from 'clsx';
import { memo } from 'react';

function StatisticsValue({ className, subject, value, mode }) {
  const isPositive = mode === STATISTICS_MODES.positive;
  const isExtraPositive = mode === STATISTICS_MODES.extra_positive;
  const isNegative = mode === STATISTICS_MODES.negative;
  const isExtraNegative = mode === STATISTICS_MODES.extra_negative;

  return (
    <span
      className={clsx(
        'max-w-[210px] w-full py-[15px] pl-20 text-left rounded-xl',
        className,
        isExtraPositive && 'bg-accept-light',
        isExtraNegative && 'bg-error-light'
      )}
    >
      <Typography variant="body1" className="text-lg text-left leading-tight">
        {subject}
      </Typography>
      <Typography
        variant="h4"
        className={clsx(
          'text-[28px]	font-semibold text-left	leading-tight',
          (isPositive || isExtraPositive) && 'text-accept-main',
          (isNegative || isExtraNegative) && 'text-error-main'
        )}
      >
        {value}
      </Typography>
    </span>
  );
}

export default memo(StatisticsValue);
