import { Box, BoxProps } from '@wix/design-system';
import { HorizontalOverflowState } from '../../state/Responsive/HorizontalOverflowState';
import React, { useEffect, useLayoutEffect } from 'react';

export interface HorizontalOverflowBoxProps extends Partial<BoxProps> {
  state: HorizontalOverflowState;
}

export function HorizontalOverflowBox(props: HorizontalOverflowBoxProps) {
  const { state, ...rest } = props;

  useLayoutEffect(() => state.initLayout(), []);
  useEffect(() => state.init(), []);

  return (
    <Box
      dataHook="horizontal-overflow-box"
      ref={(element) => {
        state._element = element;
      }}
      minWidth={0}
      direction="horizontal"
      {...rest}
    />
  );
}
