import type { ReactNode } from 'react';
import './app-form-footer.css';

// Sticky action bar pinned to the bottom of the page's scroll container. Render it as the LAST
// child inside the page's <Card> body, inside the <Form>, so htmlType="submit" + onFinish keep
// working. Matches administrator-fe's AppFormFooter.vue layout:
// `children` = primary actions (Save/Cancel) anchored LEFT; `extra` = secondary actions pushed RIGHT.
type AppFormFooterProps = {
  children: ReactNode;
  extra?: ReactNode;
};

const AppFormFooter = ({ children, extra }: AppFormFooterProps) => (
  <div className="app-form-footer">
    <div className={`app-form-footer__inner ${extra ? 'is-between' : 'is-end'}`}>
      <div className="app-form-footer__actions">{children}</div>
      {extra && <div className="app-form-footer__extra">{extra}</div>}
    </div>
  </div>
);

export default AppFormFooter;