import React, { ReactNode } from 'react';
import styles from './FormActions.module.scss';

interface FormActionsProps {
    children: ReactNode;
    sticky?: boolean;
    className?: string;
    /** Mantém botões na mesma linha em mobile (ex.: footer de modal). */
    inline?: boolean;
}

/**
 * Container para botões de ação de formulário.
 * Padrão UX (heurística 4.3): primeiro filho = Cancelar (secundário), segundo = Salvar/Enviar (primário).
 * Em modal: use `waygestFormModalFooterClassName` ou `WaygestFormModalFooter` (Cancelar esq. | Salvar dir.).
 * Com `sticky`, fixa a barra no rodapé (útil em forms longos mobile — AR-OP-017).
 */
export function FormActions({ children, sticky = false, className = '', inline = false }: FormActionsProps) {
    const inlineClass = inline ? ` ${styles.formActionsInline}` : '';
    const innerClass = `${styles.formActions}${inlineClass}`.trim();

    if (sticky) {
        return (
            <div className={`${styles.formActionsSticky} ${className}`.trim()} data-testid="form-actions-sticky">
                <div className={innerClass}>{children}</div>
            </div>
        );
    }

    return <div className={`${innerClass} ${className}`.trim()}>{children}</div>;
}