import { forwardRef } from 'react';

import Box, { type BoxProps } from '@material-hu/mui/Box';
import Chip from '@material-hu/mui/Chip';
import { type StackProps } from '@material-hu/mui/Stack';

import { type Nullable } from 'src/types/peopleExperience';

import { getChipProps } from './utils';

type DifferenceChipProps = StackProps & {
  score: Nullable<number>;
  loading?: boolean;
  passedThreshold?: boolean;
};

const DifferenceChip = (
  { score, loading, passedThreshold, ...other }: DifferenceChipProps,
  ref: BoxProps['ref'],
) => {
  const { label, color } = getChipProps(score, loading, passedThreshold);
  return (
    <Box
      {...other}
      sx={{ width: 'fit-content', ...other?.sx }}
      ref={ref}
    >
      <Chip
        color={color}
        label={label}
        size="small"
      />
    </Box>
  );
};

export default forwardRef(DifferenceChip);