import { Stack } from '@mui/material';

import AvatarGroup from '../../../AvatarGroup';
import Pills from '../../../Pills';
import { Title } from '../../../Title';

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

const SideContent = ({ sidePill, sideText, sideAvatars }: SideContentProps) => {
  return (
    <Stack
      sx={{
        gap: 2,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
      }}
    >
      {sidePill && (
        <Pills
          hasIcon={false}
          type={sidePill.type || 'info'}
          {...sidePill}
        />
      )}
      {sideText && (
        <Title
          {...sideText}
          variant="S"
          fontWeight="fontWeightRegular"
          right
        />
      )}
      {sideAvatars && <AvatarGroup {...sideAvatars} />}
    </Stack>
  );
};

export default SideContent;
