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

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

export const Primary = () => (
  <Surface>
    <Button color="green" variant="filling" size="M" radius="round" status="default">Go Live</Button>
  </Surface>
)

export const Variants = () => (
  <Surface>
    <Button color="green" variant="filling" size="M" radius="round">Filling</Button>
    <Button color="gray 1" variant="ghost" size="M" radius="round">Ghost</Button>
    <Button color="gray 1" variant="rimless" size="M" radius="round">Rimless</Button>
  </Surface>
)

export const Colors = () => (
  <Surface>
    <Button color="green" variant="filling" size="M">Publish</Button>
    <Button color="orange" variant="filling" size="M">Standby</Button>
    <Button color="red" variant="filling" size="M">Stop</Button>
    <Button color="gray 1" variant="filling" size="M">Cancel</Button>
  </Surface>
)

export const Sizes = () => (
  <Surface>
    <Button color="green" variant="filling" size="XS">XS</Button>
    <Button color="green" variant="filling" size="S">S</Button>
    <Button color="green" variant="filling" size="M">M</Button>
    <Button color="green" variant="filling" size="L">L</Button>
  </Surface>
)

export const States = () => (
  <Surface>
    <Button color="green" variant="filling" size="M" status="default">Default</Button>
    <Button color="green" variant="filling" size="M" status="disable">Disabled</Button>
    <Button color="green" variant="filling" size="M" status="loading" icon="loading">Saving…</Button>
  </Surface>
)