FINAL-PROJECT-FRONT/src/components/HomePage/RightBar/HeaderBar/RightLists/CredentialsList/ProfileLists/MediaList/index.tsx

import ImageList from '@mui/material/ImageList';
import MediaListItem from './MediaListItem';

import AlertInfo from '../../../../../../../reusableComponents/AlertInfo';
import { TMessages } from '../../../../../../../../typescript/redux/messages/types'

const MediaList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
  const filteredMessagesMemo =  messagesMemo.filter(({ type }) => type === 'image')
  return filteredMessagesMemo.length > 0 ?(
      <ImageList sx={{ width: '100%', height: 'auto' }} cols={3} rowHeight={164}>
        {filteredMessagesMemo.map(({message,createdAt,fullType,updatedAt}) => 
          <MediaListItem key={createdAt} message={message} fullType={fullType} updatedAt={updatedAt}/>)}
      </ImageList>
   ): <AlertInfo name='You do not have Media yet!'/>  
}

export default MediaList