import { TrustScoreWidget } from '@usmewe/react';

function UserProfile({ userId }) {
  return (
    <TrustScoreWidget
      userId={userId}
      showBreakdown={true}
      theme="light"
    />
  );
}

<div
  data-usmewe-widget="trust-score"
  data-user-id="user_abc123"
  data-theme="light"
  data-show-breakdown="true"
></div>

<script src="https://cdn.usmewe.com/widgets/v1.js" async></script>

<TrustScoreWidget
  userId={userId}
  variant="badge"
/>

┌────────────────┐
│ ⭐ 56 Trusted  │
└────────────────┘

<TrustScoreWidget
  userId={userId}
  variant="card"
/>

┌─────────────────────────┐
│    Trust Score          │
│                         │
│      ⭐ 56              │
│    Established          │
│                         │
│  ████████████░░░░  56%  │
└─────────────────────────┘

<TrustScoreWidget
  userId={userId}
  variant="detailed"
  showBreakdown={true}
/>

┌─────────────────────────────────┐
│         Trust Score             │
│            ⭐ 56                │
│         Established             │
│                                 │
│  Seniority        ████░░   6/12 │
│  Repayments       ██████  20/40 │
│  Volume           █████░  10/20 │
│  Social           ██████  15/15 │
│  Level Bonus      █████░   5/13 │
│                                 │
│  Borrowing Power: $100          │
└─────────────────────────────────┘

// Light theme (default)
<TrustScoreWidget theme="light" />

// Dark theme
<TrustScoreWidget theme="dark" />

// Custom theme
<TrustScoreWidget
  theme={{
    background: '#1a1a2e',
    text: '#ffffff',
    primary: '#6366F1',
    secondary: '#a5a5a5',
    border: '#2d2d44'
  }}
/>

// Small (120px)
<TrustScoreWidget size="sm" />

// Medium (200px, default)
<TrustScoreWidget size="md" />

// Large (300px)
<TrustScoreWidget size="lg" />

// Custom
<TrustScoreWidget width={250} height={150} />

<TrustScoreWidget
  userId={userId}
  showBreakdown={true}      // Show component breakdown
  showTier={true}           // Show tier name
  showBorrowingPower={true} // Show max borrow amount
  animated={true}           // Animate score display
  interactive={false}       // Disable hover effects
/>

GET /v1/trust-score/{userId}

Authorization: Bearer YOUR_API_KEY

{
  "userId": "user_abc123",
  "score": 56,
  "tier": "Established",
  "breakdown": {
    "seniority": 6,
    "repaymentHistory": 20,
    "transactionVolume": 10,
    "socialNetwork": 15,
    "levelBonus": 5
  },
  "borrowingPower": {
    "maxAmount": 100,
    "maxDuration": 30,
    "interestRate": 0.03
  }
}

import { UsmeweClient } from '@usmewe/sdk';

const usmewe = new UsmeweClient({ apiKey: 'YOUR_API_KEY' });

async function displayTrustScore(userId, containerId) {
  const score = await usmewe.trustScore.get(userId);

  const container = document.getElementById(containerId);
  container.innerHTML = `
    <div class="trust-score-widget">
      <div class="score">${score.score}</div>
      <div class="tier">${score.tier}</div>
    </div>
  `;
}

displayTrustScore('user_abc123', 'score-container');

function Checkout({ buyerId }) {
  return (
    <div className="checkout">
      <h2>Checkout</h2>

      <div className="buyer-info">
        <TrustScoreWidget
          userId={buyerId}
          variant="badge"
        />
        <span>Verified Buyer</span>
      </div>

      {/* Rest of checkout */}
    </div>
  );
}

function SellerCard({ seller }) {
  return (
    <div className="seller-card">
      <img src={seller.avatar} alt={seller.name} />
      <h3>{seller.name}</h3>

      <TrustScoreWidget
        userId={seller.id}
        variant="compact"
        showBorrowingPower={false}
      />
    </div>
  );
}

function FinancingOption({ userId, amount }) {
  const { score, borrowingPower } = useTrustScore(userId);

  const eligible = borrowingPower.maxAmount >= amount;

  return (
    <div className={`financing ${eligible ? 'eligible' : 'ineligible'}`}>
      <TrustScoreWidget userId={userId} variant="card" />

      {eligible ? (
        <button>Pay with usmewe Credit</button>
      ) : (
        <p>Improve your Trust Score to unlock financing</p>
      )}
    </div>
  );
}

<TrustScoreWidget
  userId={userId}
  onLoad={(score) => {
    console.log('Score loaded:', score);
  }}
  onError={(error) => {
    console.error('Failed to load score:', error);
  }}
  onClick={() => {
    // Open detailed view or profile
  }}
/>

<TrustScoreWidget
  userId={userId}
  fallback={<PrivateScoreBadge />}
/>