import React from 'react';
import { Button, Card } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';

const Step2Confirm = ({
    skipConnectAssets,
    numCompleteProducts,
    numTotalProducts,
    onDownloadReport,
}: {
    skipConnectAssets: boolean;
    numCompleteProducts: number;
    numTotalProducts: number;
    onDownloadReport: () => void;
}) => (
    <div className="bulk-upload-sidebar-step-body">
        {skipConnectAssets ? (
            <div className="highlight skipped">
                {$t('bulkDigitalAudio.step2Confirm.skippedText')}
            </div>
        ) : (
            <>
                <div className="bulk-upload-sidebar-step-inline">
                    <div className="highlight success">
                        {Math.round(
                            (numCompleteProducts / numTotalProducts) * 100
                        ) || 0}
                        %
                    </div>
                    <Card.Text>
                        {$t('bulkDigitalAudio.step2Confirm.completeText')}
                    </Card.Text>
                </div>
                <div className="bulk-upload-sidebar-buttons">
                    <Button
                        size="sm"
                        variant="tertiary"
                        onClick={onDownloadReport}
                    >
                        <GlyphIcon name="download" size={12} />
                        <span>
                            {$t('bulkDigitalAudio.bulkUploadSidebar.report')}
                        </span>
                    </Button>
                </div>
            </>
        )}
    </div>
);

export default Step2Confirm;