import get from 'lodash/get';
import Card from "../../Card/index.js";
import Grid from "../../../layout/Grid/index.js";
import GridItem from "../../../layout/GridItem/index.js";
import Well from "../../../layout/Well/index.js";
import MarkdownContent from "../../../content/MarkdownContent/index.js";
import classes from './styles.module.scss';
const justification = {
  left: {
    columns: 6
  },
  center: {
    columns: 6,
    offset: 3
  },
  right: {
    columns: 6,
    offset: 6
  }
};
const Slide = ({
  slide,
  cardProps
}) => <Card edge="sharp" {...cardProps}>
    <MarkdownContent source={slide.text} />
  </Card>;
const Slides = function Slides(props) {
  const {
    slides,
    slideComponent: SlideComponent = Slide,
    ...restProps
  } = props;
  return <div className={classes.slides}>
      {slides.map(slide => <div key={slide.key} className={classes.slide} data-scrollindex={slide.index} {...restProps}>
          <Well>
            <Grid>
              <GridItem xs md={get(justification, slide.justify, justification.right)}>
                <SlideComponent slide={slide} />
              </GridItem>
            </Grid>
          </Well>
        </div>)}
    </div>;
};
export default Slides;