import { memo } from 'react';

import Grid from '@mui/material/Grid';
import List from '@mui/material/List';

import { IconInfoItemList } from '../icon-info-item';
import { IconListItem } from '../icon-list-item';
import { UserInfo } from '../user-info';

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

import createClasses from './styles';

const SidebarRight = (props: SidebarRightProps) => {
  const {
    userInfoProps,
    iconInfoItems,
    iconListItems,
    renderCompact,
    classes
  } = props;
  const styles = createClasses();

  return (
    <Grid classes={{ root: styles.root, ...classes }}>
      {userInfoProps && <UserInfo {...userInfoProps} />}

      {iconInfoItems && (
        <IconInfoItemList list={iconInfoItems} renderCompact={renderCompact} />
      )}

      {iconListItems && (
        <List component="div">
          {iconListItems.map((item) => (
            <IconListItem {...item} key={`item_${item.text}`} />
          ))}
        </List>
      )}
    </Grid>
  );
};

SidebarRight.defaultProps = { renderCompact: false };

const m = memo(SidebarRight);
export { m as SidebarRight };