import GameAccounts from '../../../components/GameAccounts.jsx'
import VendorSales from '../../../components/VendorSales.jsx'
import { api } from '../../../api/client.js'

// Staff link their OWN in-game account and view their characters — the same
// shared component players use, pointed at the staff self-service endpoints.
export default function AdminCharacters() {
  return (
    <section style={{ maxWidth: 760 }}>
      <p className="sans" style={{ marginTop: 0, marginBottom: 22, color: 'var(--muted)', fontSize: '0.92rem', lineHeight: 1.6 }}>
        Link your own game account to view your characters, stats, skills and vendors.
      </p>
      <GameAccounts scope={api.admin.shard} charTo={(serial) => `/admin/characters/${serial}`} />
      <VendorSales fetchSales={api.admin.shard.sales} />
    </section>
  )
}