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

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

export const Default = () => (
  <Surface>
    <div style={{ width: 260 }}>
      <Slider theme="dark" size="M" min={0} max={100} step={1} value={60} showValue />
    </div>
  </Surface>
)

export const Values = () => (
  <Surface>
    <div style={{ width: 260 }}>
      <Slider theme="dark" size="M" min={0} max={100} step={1} value={25} showValue />
    </div>
    <div style={{ width: 260 }}>
      <Slider theme="dark" size="M" min={0} max={100} step={1} value={90} showValue />
    </div>
  </Surface>
)

export const SmallSize = () => (
  <Surface>
    <div style={{ width: 260 }}>
      <Slider theme="dark" size="S" min={0} max={100} step={1} value={45} showValue />
    </div>
  </Surface>
)

export const Disabled = () => (
  <Surface>
    <div style={{ width: 260 }}>
      <Slider theme="dark" size="M" min={0} max={100} step={1} value={70} showValue disabled />
    </div>
  </Surface>
)