"use strict";

import React from 'react';
import { View } from 'react-native';
import { useGridSystem } from "./utils.js";
import { Image } from "../Image/index.js";
import { Styles } from "../Consts/styles.js";
import styles from "./styles.js";
import { GridContext } from "../Context/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const Container = ({
  children,
  margin = 12,
  padding = 0,
  gutter = 12,
  backgroundImage,
  style
}) => {
  const {
    numberOfColumns,
    widthDevice
  } = useGridSystem();
  const widthSection = widthDevice - margin * 2;
  const totalGutterSize = gutter * (numberOfColumns - 1);
  const totalItemSize = widthSection - totalGutterSize - padding * 2;
  const sizePerSpan = totalItemSize / numberOfColumns;
  return /*#__PURE__*/_jsx(GridContext.Provider, {
    value: {
      numberOfColumns,
      gutter,
      sizePerSpan,
      getSizeSpan: span => {
        return span * sizePerSpan + (span - 1) * gutter;
      }
    },
    children: /*#__PURE__*/_jsxs(View, {
      style: [style, styles.protectedStyle, Styles.rowWrap, {
        width: widthSection,
        marginHorizontal: margin,
        padding,
        gap: gutter
      }],
      children: [!!backgroundImage && /*#__PURE__*/_jsx(Image, {
        source: {
          uri: backgroundImage
        },
        style: styles.imageBackground
      }), children]
    })
  });
};
export default Container;
//# sourceMappingURL=Container.js.map