import React from 'react';
import { Button, useFullscreenModal } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import { useHistory } from 'react-router-dom';
import { createContractEarningsTransfer } from 'src/urls/frontend-royalties';

interface ContractEarningsTransfersButtonsProps {
    contractId: string;
}

const ContractEarningsTransfersButtons: React.FC<
    ContractEarningsTransfersButtonsProps
> = ({ contractId }) => {
    const history = useHistory();
    const { open } = useFullscreenModal();

    const openModal = () => {
        open(() => history.push(createContractEarningsTransfer(contractId)));
    };

    return (
        <div className="ContractDetail-earnings-transfers-buttons ml-auto">
            <Button
                className="ContractDetail-earnings-transfers-addButton"
                onClick={openModal}
                variant="primary"
            >
                <GlyphIcon name="plus" size={12} />
                Add
            </Button>
        </div>
    );
};

export default ContractEarningsTransfersButtons;