import React, { useState } from 'react';

import { Trans } from 'react-i18next';
import { Button } from 'react-bootstrap';

/**
 * @typedef ConfirmedButtonProps
 * @property {import('react').ReactNode | import('react').ReactNodeArray} [children]
 * @property {() => void} onClick
 */

/**
 * @param {ConfirmedButtonProps} props
 */
const ConfirmButton = ({ children, onClick }) => {
    const [showConfirm, setShowConfirm] = useState(false);

    const handleClick = (event) => {
        event.preventDefault();
        setShowConfirm(!showConfirm);
    };

    const handleConfirmClick = (event) => {
        event.preventDefault();
        onClick();

        setShowConfirm(false);
    };

    return (
        <>
            <Button variant='primary' onClick={handleClick}>
                {children}
            </Button>
            {showConfirm && (
                <Button variant='danger' onClick={handleConfirmClick}>
                    <Trans>Confirm</Trans>
                </Button>
            )}
        </>
    );
};

export default ConfirmButton;