import React, { forwardRef } from 'react';

import { Container, ContainerRef } from '@cleartrip/ct-design-container';
import { useStyles } from '@cleartrip/ct-design-style-manager';

import { IBoxProps } from './type';
import staticStyles, { getBoxGap } from './style';

const Box = forwardRef<ContainerRef, IBoxProps>(
  ({ children, styleConfig, horizontal = false, boxSize, onClick }, forwardedRef) => {
    const { root = [] } = styleConfig || {};

    const dynamicStyles = useStyles(
      (theme) => ({
        root: {
          flexDirection: horizontal ? 'row' : 'column',
          gap: getBoxGap(theme, boxSize),
        },
      }),
      [horizontal, boxSize],
    );

    return (
      <Container
        ref={forwardedRef}
        onClick={onClick}
        styleConfig={{ root: [staticStyles.root, dynamicStyles.root, ...root] }}
      >
        {children}
      </Container>
    );
  },
);

Box.displayName = 'Box';
export default Box;