import React from 'react';
import PropTypes from 'prop-types';
import { withTheme } from '../styles';

import Box from '../Box';

const GalleryElementComponent = (props) => {
  const { children } = props;
  return (
    <Box
      className="gallery-element"
      flex="0 0 auto"
      style={{
        scrollSnapAlign: 'center',
        scrollSnapStop: 'always',
      }}
      {...props}
    >
      {children}
    </Box>
  );
};

GalleryElementComponent.propTypes = {
  children: PropTypes.element.isRequired,
};

GalleryElementComponent.displayName = 'GalleryElement';

export default withTheme(GalleryElementComponent);