import React from 'react';

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

import { getSafeAreaContainerStyles } from './style';
import { ISafeAreaContainer } from './type';
import useSafeAreaInset from './hooks/useSafeAreaInset';

/**
 * Web implementation of SafeAreaContainer.
 *
 * On the browser there is no true system safe-area (notch / home-bar), so
 * `useSafeAreaInset` returns a zeroed inset object. The wrapper is still
 * rendered as a plain semantic `<div>` styled via `useStyles` +
 * `useWebMergeStyles` to stay consistent with the cross-platform
 * contract documented in Migration.MD — no styled-components remain.
 */
const SafeAreaContainer: React.FC<ISafeAreaContainer> = ({ children, styleConfig = {} }) => {
  const insets = useSafeAreaInset();

  const containerStyles = useStyles(
    () => ({
      root: getSafeAreaContainerStyles({ insets }),
    }),
    [insets],
  );

  const { root: customRootStyles = [] } = styleConfig || {};

  const mergedRootStyles = useWebMergeStyles(
    [containerStyles.root, ...customRootStyles],
    [containerStyles.root, customRootStyles],
  );

  return <div className={mergedRootStyles}>{children}</div>;
};

SafeAreaContainer.displayName = 'SafeAreaContainer';

export default SafeAreaContainer;