Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { styled, Typography } from '@mui/material';

const StyledList = styled('ul')`
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  gap: 1rem;
`;

export function List({
  items = [],
  renderItem = () => {},
  emptyMessage = 'No hay elementos para mostrar',
  keyExtractor = (item) => item.id,
  renderHeader,
  renderFooter,
  styles = {}
}) {
  if (!items.length) {
    return <Typography>{emptyMessage}</Typography>;
  }

  return (
    <StyledList styles={styles}>
      {renderHeader && <li>{renderHeader()}</li>}
      {items.map((item, index) => {
        return <li key={keyExtractor(item)}>{renderItem(item, index)}</li>;
      })}
      {renderFooter && <li>{renderFooter()}</li>}
    </StyledList>
  );
}