// Copyright (c) Mysten Labs, Inc.
// Modifications Copyright (c) 2024 IOTA Stiftung
// SPDX-License-Identifier: Apache-2.0

import type { WalletWithRequiredFeatures } from '@iota/wallet-standard';

import { Button } from '../../ui/Button.js';
import { Heading } from '../../ui/Heading.js';
import { Text } from '../../ui/Text.js';
import * as styles from './ConnectionStatus.css.js';

type ConnectionStatusProps = {
    selectedWallet: WalletWithRequiredFeatures;
    hadConnectionError: boolean;
    onRetryConnection: (selectedWallet: WalletWithRequiredFeatures) => void;
};

export function ConnectionStatus({
    selectedWallet,
    hadConnectionError,
    onRetryConnection,
}: ConnectionStatusProps) {
    return (
        <div className={styles.container}>
            {selectedWallet.icon && (
                <img
                    className={styles.walletIcon}
                    src={selectedWallet.icon}
                    alt={`${selectedWallet.name} logo`}
                />
            )}
            <div className={styles.title}>
                <Heading as="h2" size="xl">
                    Opening {selectedWallet.name}
                </Heading>
            </div>
            <div className={styles.connectionStatus}>
                {hadConnectionError ? (
                    <Text color="danger">Connection failed</Text>
                ) : (
                    <Text color="muted">Confirm connection in the wallet...</Text>
                )}
            </div>
            {hadConnectionError ? (
                <div className={styles.retryButtonContainer}>
                    <Button
                        type="button"
                        variant="primary"
                        onClick={() => onRetryConnection(selectedWallet)}
                    >
                        Retry Connection
                    </Button>
                </div>
            ) : null}
        </div>
    );
}