import { Divider, Row } from 'antd';
import type { ReactNode } from 'react';

// Top action/button bar for management list pages. Renders the two house dividers and the
// space-between button Row exactly as every list page already does, so only the buttons need to be
// filled in via `children` — the dividers + layout come for free and stay identical across pages.
//
// Layout: children sit inside a `justify="space-between"` Row. For a left/right split (e.g. a
// Create/Delete group on the left, Refresh on the right), wrap each group in its own <Space> —
// space-between pushes them to opposite edges. Pass `justify="start"` to anchor all buttons left.
type RowJustify = 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';

type AppActionBarProps = {
  children: ReactNode;
  /** Row justify. Defaults to the house 'space-between'. */
  justify?: RowJustify;
  /** Horizontal gap between the buttons in the bar. */
  gap?: number | string;
};

const AppActionBar = ({ children, justify = 'space-between', gap = '10px' }: AppActionBarProps) => (
  <>
    <Divider className="mt-0 mb-0" />
    <Row justify={justify} style={{ gap }}>
      {children}
    </Row>
    <Divider className="mt-0 mb-2" />
  </>
);

export default AppActionBar;