import { ParentSize } from '@visx/responsive';

interface ResponsiveContainerProps {
  className?: string;
  style?: React.CSSProperties;
  children: (width: number, height: number) => JSX.Element;
}

export const ResponsiveContainer = ({
  className,
  style,
  children,
}: ResponsiveContainerProps) => {
  return (
    <ParentSize className={className} parentSizeStyles={style}>
      {(parent) => {
        const { width, height } = parent;
        if (width && height) {
          return children(width, height);
        } else {
          return null;
        }
      }}
    </ParentSize>
  );
};