import Title from '@design-system/Title';
import { Stack } from '@mui/material';

import Decorator from '../Decorator';

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

const StatItem = ({
  type,
  title,
  value,
  differenceIndicator,
}: StatItemProps) => {
  return (
    <Stack
      component="li"
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        py: 2,
      }}
    >
      <Decorator type={type} />
      <Title
        title={title}
        variant="S"
        fontWeight="fontWeightRegular"
        sx={{ ml: 0.5 }}
      />
      <Title
        title={value}
        variant="L"
        sx={{ marginLeft: 'auto' }}
      />
      {differenceIndicator && (
        <Stack sx={{ ml: 1 }}>{differenceIndicator}</Stack>
      )}
    </Stack>
  );
};

export default StatItem;
