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

import { clsx } from 'clsx';
import type { ReactNode } from 'react';

import { Heading } from '../../ui/Heading.js';
import * as styles from './WalletListItem.css.js';

type WalletListItemProps = {
    name: string;
    icon: ReactNode;
    isSelected?: boolean;
    onClick: () => void;
};

export function WalletListItem({ name, icon, onClick, isSelected = false }: WalletListItemProps) {
    return (
        <li className={styles.container}>
            <button
                className={clsx(styles.walletItem, { [styles.selectedWalletItem]: isSelected })}
                type="button"
                onClick={onClick}
            >
                {icon && typeof icon === 'string' ? (
                    <img className={styles.walletIcon} src={icon} alt={`${name} logo`} />
                ) : (
                    icon
                )}
                <Heading size="md" truncate asChild>
                    <div>{name}</div>
                </Heading>
            </button>
        </li>
    );
}