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

const Surface = ({ children }: any) => (
  <div style={{ background: 'var(--bg-layer1)', padding: 20, display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'stretch', borderRadius: 8, minWidth: 280 }}>
    {children}
  </div>
)

export const Values = () => (
  <Surface>
    <Progress size="M" status="default" theme="dark" value={20} showLabel />
    <Progress size="M" status="default" theme="dark" value={60} showLabel />
    <Progress size="M" status="default" theme="dark" value={95} showLabel />
  </Surface>
)

export const Statuses = () => (
  <Surface>
    <Progress size="M" status="default" theme="dark" value={45} showLabel />
    <Progress size="M" status="success" theme="dark" value={100} showLabel />
    <Progress size="M" status="warning" theme="dark" value={70} showLabel />
    <Progress size="M" status="error" theme="dark" value={35} showLabel />
  </Surface>
)

export const Sizes = () => (
  <Surface>
    <Progress size="M" status="default" theme="dark" value={65} showLabel />
    <Progress size="S" status="default" theme="dark" value={65} showLabel />
  </Surface>
)