import "../Collection.css";
import { jsx } from "react/jsx-runtime";
import { Children } from "react";
import { useTheme } from "./Theme/UI.js";
import { Spacing } from "./Theme/themeUtils.js";
import { ShirtSize } from "./Theme/themes.js";
const base = "Collection_base_52312";
const row = "Collection_row_52312";
const css = {
  base,
  row
};
const LayoutMode = {
  AutoFill: "auto-fill",
  // will squeeze as many items into a given space and minimum size
  AutoFit: "auto-fit",
  // auto-fill but also stretch to fit the entire available space.
  ScrollableRow: "scrollableRow"
};
const sizeMap = {
  [ShirtSize.Small]: Spacing.Xs,
  [ShirtSize.Medium]: Spacing.Md,
  [ShirtSize.Large]: Spacing.Xl
};
const Collection = ({
  gap = ShirtSize.Medium,
  minItemWidth = 240,
  mode = LayoutMode.AutoFit,
  children
}) => {
  const {
    themeSettings: { className: themeClass }
  } = useTheme();
  const count = Children.toArray(children).length;
  const style = {
    gridGap: sizeMap[gap],
    gridTemplateColumns: ""
  };
  const classes = [css.base, themeClass];
  if (mode === LayoutMode.AutoFill || LayoutMode.AutoFit) {
    style.gridTemplateColumns = `repeat(${mode}, minmax(${minItemWidth}px, 1fr))`;
  }
  if (mode === LayoutMode.ScrollableRow) {
    classes.push(css.row);
    style.gridTemplateColumns = `repeat(${count}, ${minItemWidth}px)`;
  }
  return /* @__PURE__ */ jsx("div", { className: classes.join(" "), style, children });
};
export {
  LayoutMode,
  Collection as default
};
