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

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 Default = () => (
  <Surface>
    <InputNumber property1="Default" value={8} min={1} max={60} step={1} />
  </Surface>
)

export const OnlyAdd = () => (
  <Surface>
    <InputNumber property1="Only Add" value={30} min={0} max={120} step={5} />
  </Surface>
)

export const OnlyReduce = () => (
  <Surface>
    <InputNumber property1="Only Reduce" value={100} min={0} max={100} step={10} />
  </Surface>
)

export const Readonly = () => (
  <Surface>
    <InputNumber property1="Readonly" value={25} min={0} max={100} step={1} />
  </Surface>
)