import * as stylex from '@stylexjs/stylex';

import type { LayoutGridProps } from './types';

import { alignMap, paddingXMap } from '~/src/ui/layouts/layout/styles';
import { columnGapMap, layoutGridStyles, rowGapMap } from './styles';

/**
 * A 12-column grid layout component that can be used to create complex layouts.
 */
export const LayoutGrid = ({
  children,
  rowGap,
  columnGap,
  align,
  paddingX,
  height,
  style,
}: LayoutGridProps) => {
  return (
    <div
      {...stylex.props(
        layoutGridStyles.base,
        columnGap && columnGapMap[columnGap],
        rowGap && rowGapMap[rowGap],
        align && alignMap[align],
        paddingX && paddingXMap[paddingX],
        style
      )}
      style={{ height }}
    >
      {children}
    </div>
  );
};