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

const Surface = ({ children }: any) => (
  <div style={{ background: 'var(--bg-layer1)', padding: 20, display: 'flex', gap: 20, flexWrap: 'wrap', alignItems: 'center', borderRadius: 8 }}>
    {children}
  </div>
)

export const Primary = () => (
  <Surface>
    <Switch darkTheme="on" enable="yes" loading="no" status="on" />
  </Surface>
)

export const Statuses = () => (
  <Surface>
    <Switch darkTheme="on" enable="yes" loading="no" status="off" />
    <Switch darkTheme="on" enable="yes" loading="no" status="on" />
    <Switch darkTheme="on" enable="yes" loading="no" status="live" />
  </Surface>
)

export const Loading = () => (
  <Surface>
    <Switch darkTheme="on" enable="yes" loading="yes" status="on" />
  </Surface>
)

export const Disabled = () => (
  <Surface>
    <Switch darkTheme="on" enable="no" loading="no" status="off" />
    <Switch darkTheme="on" enable="no" loading="no" status="on" />
  </Surface>
)