import * as Ariakit from '@ariakit/react';
import { getClassNames } from '@websolutespa/bom-core';
import { forwardRef } from 'react';
import { Button, ButtonProps } from '../button/button';
import { Role } from '../role/role';

export type ModalDismissProps = Ariakit.DialogDismissProps & Omit<ButtonProps, keyof Ariakit.DialogDismissProps> & {
  asChild?: boolean;
};

export const ModalDismiss = forwardRef<HTMLButtonElement, ModalDismissProps>(
  function ModalDismiss({
    children,
    asChild,
    store,
    className,
    ...props
  }, ref) {
    const classNames = getClassNames('modal__dismiss', className);
    return (
      <Ariakit.DialogDismiss
        className={classNames}
        ref={ref}
        store={store}
        {...props}
        render={asChild ? (
          <Role />
        ) : (
          <Button
            {...props}>
            {children}
          </Button>
        )}
      />
    );
  }
);