import { Steps, StepItem } from 'tvu-react-pilot'

// StepItem requires a <Steps> parent — author it inside <Steps>; that IS its render.
const Surface = ({ children }: any) => (
  <div style={{ background: 'var(--bg-layer1)', padding: 20, display: 'flex', gap: 24, flexWrap: 'wrap', alignItems: 'flex-start', borderRadius: 8 }}>
    {children}
  </div>
)

// All three states in one flow: completed / active / pending.
export const States = () => (
  <Surface>
    <div style={{ width: 380 }}>
      <Steps current={1} direction="horizontal" stepStyle="number">
        <StepItem index={1} state="completed" stepStyle="number" direction="horizontal" title="Source" description="Connected" showTrailingConnector />
        <StepItem index={2} state="active" stepStyle="number" direction="horizontal" title="Encode" description="In progress" showLeadingConnector showTrailingConnector />
        <StepItem index={3} state="pending" stepStyle="number" direction="horizontal" title="Publish" description="Pending" showLeadingConnector />
      </Steps>
    </div>
  </Surface>
)

export const Vertical = () => (
  <Surface>
    <div style={{ width: 240 }}>
      <Steps current={1} direction="vertical" stepStyle="number">
        <StepItem index={1} state="completed" stepStyle="number" direction="vertical" title="Source" description="Connected" showTrailingConnector />
        <StepItem index={2} state="active" stepStyle="number" direction="vertical" title="Encode" description="In progress" showLeadingConnector showTrailingConnector />
        <StepItem index={3} state="pending" stepStyle="number" direction="vertical" title="Publish" description="Pending" showLeadingConnector />
      </Steps>
    </div>
  </Surface>
)