import React from 'react';
import { ButtonGroup } from '@cloudflare/component-button';
import { isMobile } from '@cloudflare/util-responsive';
import { useRenderOnResize } from '@cloudflare/util-hooks';

type Props = React.ComponentProps<typeof ButtonGroup> & {
  children: React.ReactNode;
};

export default function FormButtonGroup({ children, ...props }: Props) {
  useRenderOnResize();
  return (
    <ButtonGroup
      direction="row"
      spaced
      width={isMobile() ? '100%' : undefined}
      stretch={isMobile()}
      {...props}
    >
      {children}
    </ButtonGroup>
  );
}