import React from 'react';
import {
    Card,
    GlyphButton,
    LoadingSpinner,
} from '@theorchard/suite-components';

const TemplateDownloadButton = ({
    title,
    link,
    isLoading = false,
}: {
    title: string;
    link: string | null;
    isLoading?: boolean;
}) => {
    const handleClick = () => {
        if (link) {
            window.open(link, '_blank');
        }
    };

    return (
        <Card suite onClick={handleClick} disabled={!link || isLoading}>
            <Card.Body>
                <Card.Header>
                    <Card.Title>{title}</Card.Title>
                    {isLoading ? (
                        <LoadingSpinner show size={24} />
                    ) : (
                        <GlyphButton
                            name="download"
                            size="sm"
                            variant="secondary"
                            disabled={!link}
                        />
                    )}
                </Card.Header>
            </Card.Body>
        </Card>
    );
};

export default TemplateDownloadButton;