import Grid, { GridProps } from '@material-hu/mui/Grid';

import ArticleChildCard from 'src/pages/dashboard/libraries/components/ArticleChildCard';
import { ArticleChild } from 'src/types/libraries';

export type ArticleChildrenProps = GridProps & {
  articleChildren: ArticleChild[];
};

export const ArticleChildren = ({
  articleChildren,
  ...gridProps
}: ArticleChildrenProps) => {
  return (
    <Grid
      container
      spacing={2}
      direction="row"
      alignItems="center"
      justifyContent="center"
      {...gridProps}
    >
      {articleChildren?.map(child => (
        <Grid
          key={child.id}
          item
        >
          <ArticleChildCard {...child} />
        </Grid>
      ))}
    </Grid>
  );
};

export default ArticleChildren;