import { Logo } 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: 28, flexWrap: 'wrap', alignItems: 'center', borderRadius: 8 }}>
    {children}
  </div>
)

// Logo renders the registry brand SVG — `tvu` (full mark) or `ts` (compact).
// Not hand-drawn: the graphic comes from icon/logo/TVU · icon/logo/ts.
export const Brand = () => (
  <Surface>
    <Logo type="tvu" size={40} />
    <Logo type="ts" size={40} />
  </Surface>
)

export const Sizes = () => (
  <Surface>
    <Logo type="tvu" size={16} />
    <Logo type="tvu" size={24} />
    <Logo type="tvu" size={32} />
    <Logo type="tvu" size={48} />
  </Surface>
)