import React from 'react';
import { Button } from '@theorchard/suite-components';
import { Link } from 'react-router-dom';
import { getAccountingRunSummary } from 'src/urls/frontend-royalties';
import './styles.scss';

export interface SummaryLinkPropTypes {
    accountingRunId: number;
    contractCount: number | null;
}

export const SummaryLink: React.FC<SummaryLinkPropTypes> = ({
    accountingRunId,
    contractCount,
}) =>
    contractCount ? (
        <Link to={getAccountingRunSummary(accountingRunId)}>
            <Button
                data-testid={`summaryLink-${accountingRunId}`}
                type="button"
                variant="quartenary"
            >
                {contractCount}
            </Button>
        </Link>
    ) : null;

export default SummaryLink;