// @flow strict

import * as React from 'react';

import {classify} from '../../utils/classify';
import type {ButtonProps} from '../Button';
import {Button} from '../Button';
import type {SimpleButtonDropdownProps} from '../ButtonDropdown';
import {SimpleButtonDropdown} from '../ButtonDropdown';

import css from './TableBar.module.css';


export type TableActionBarProps = {
  children?: React.Node,
  className?: string,
  ...
};

export const ButtonCta = ({classNames, ...props}: ButtonProps): React.Node => (
  <Button
    {...props}
    data-testid="table-action-bar-button-cta"
    type="primary"
    size="small"
    classNames={{...classNames, wrapper: css.buttonCta}}
  />
);

export const DropdownCta = ({
  classNames,
  ...props
}: SimpleButtonDropdownProps): React.Node => (
  <SimpleButtonDropdown
    {...props}
    data-testid="table-action-bar-dropdown-cta"
    type="primary"
    size="small"
    classNames={{...classNames, buttonWrapper: css.buttonCta}}
  />
);

export const TableActionBar = ({
  children,
  className,
  ...props
}: TableActionBarProps): React.Node => (
  <div
    {...props}
    className={classify(css.tableActionBar, className)}
    data-testid="table-action-bar"
  >
    {children}
  </div>
);