import { DgbLogo } from './DgbLogo.js';
import { fmtDgb } from './format.js';

// Assets section. Today the only asset is native DGB. When
// DigiAssets (Layer-2 token) support lands, each token becomes
// another row. Layout matches Trust Wallet / MetaMask's tokens tab:
// icon + name/ticker on the left, amount + fiat on the right.

export function AssetsList({
  totalSats,
  loading,
}: {
  totalSats: number;
  loading: boolean;
}): JSX.Element {
  const dgb = totalSats / 1e8;
  const [intFmt, fracPart = '00'] = fmtDgb(dgb).split('.');

  return (
    <section className="assets">
      <div className="assets-header">
        <h3>Assets</h3>
        <span className="assets-count">1 asset</span>
      </div>

      <ul className="asset-list">
        <li className="asset-row">
          <div className="asset-icon"><DgbLogo size={36} /></div>
          <div className="asset-body">
            <div className="asset-name">DigiByte</div>
            <div className="asset-sub">DGB · native · 15-second blocks</div>
          </div>
          <div className="asset-value">
            <div className="asset-amount">
              {loading ? <span className="skeleton skeleton-line" /> : (
                <>
                  <span>{intFmt}</span>
                  <span className="asset-frac">.{fracPart}</span>
                </>
              )}
            </div>
            <div className="asset-fiat">$—</div>
          </div>
        </li>
      </ul>

      <div className="assets-footer">
        DigiAssets (Layer-2 tokens) support arrives in a follow-up.
      </div>
    </section>
  );
}