import { Button } from '@mui/material';
import { Oval } from 'react-loader-spinner';
import './GenerativeFillButtons.scss';
import React = require('react');

interface ButtonContainerProps {
    getEdit: () => Promise<void>;
    loading: boolean;
    onReset: () => void;
}

const Buttons = ({ loading, getEdit, onReset }: ButtonContainerProps) => {
    return (
        <div className="generativeFillBtnContainer">
            <Button onClick={onReset}>Reset</Button>
            <Button
                variant="contained"
                onClick={() => {
                    getEdit();
                }}>
                <span style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                    Get Edit
                    {loading && <Oval height={20} width={20} color="#ffffff" visible={true} ariaLabel="oval-loading" secondaryColor="#ffffff89" strokeWidth={3} strokeWidthSecondary={3} />}
                </span>
            </Button>
        </div>
    );
};

export default Buttons;