import { UserMenu } from 'tvu-react-pilot'

// DS is dark-default (:root tokens). Cards render on white, so wrap every story
// on the DS's own dark surface — mirrors react-pilot App.tsx Card.
const Surface = ({ children }: any) => (
  <div style={{ background: 'var(--bg-layer1)', padding: 24, display: 'flex', gap: 20, flexWrap: 'wrap', alignItems: 'center', borderRadius: 8 }}>
    {children}
  </div>
)

// The after-login account entry point: a solid-color initials/image avatar.
// The account panel (header + actions[MenuList] + language toggle + sign-out)
// opens on avatar click — an interaction-driven state that does NOT render in a
// static card (same posture as PopupBox's body / Tooltip's hover). The avatar
// trigger is the statically-renderable affordance; its props drive the panel live.
export const Avatars = () => (
  <Surface>
    <UserMenu name="Nancy Zeng" role="Owner" email="nancy@tvu.com" color="var(--brand)" />
    <UserMenu name="Alex Rivera" role="Admin" email="alex@tvu.com" color="#2f6fed" />
    <UserMenu name="Sam Lee" role="Member" email="sam@tvu.com" color="#e0742b" />
    <UserMenu name="Producer One" role="Producer" email="prod@tvu.com" />
  </Surface>
)