FINAL-PROJECT-FRONT/src/components/HomePage/RightBar/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'

interface IMediaList {
  filteredAndSorted: TMessages,
  handleScrollToTheMessage: (_id:string) => void,
}

const MediaList = ({ filteredAndSorted,handleScrollToTheMessage }: IMediaList) => {
  
  return filteredAndSorted.length > 0 ?(
      <ImageList sx={{ width: '100%', height: 'auto',overflow:'hidden' }} cols={3} rowHeight={164}>
        {filteredAndSorted.map(({message,createdAt,fullType,updatedAt,_id}) => 
          <MediaListItem key={createdAt} message={message} fullType={fullType}
            updatedAt={updatedAt} handleScrollToTheMessage={handleScrollToTheMessage} id={_id} />)}
      </ImageList>
   ): <AlertInfo name='You do not have Media yet!'/>  
}

export default MediaList