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

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

export const LabelInput = () => (
  <Surface>
    <div style={{ width: 360 }}>
      <FormItem label="Stream Name" type="Label & Input" theme="Dark" status="Normal" layout="1 line" labelWidth="120 px" required />
    </div>
  </Surface>
)

export const LabelSelector = () => (
  <Surface>
    <div style={{ width: 360 }}>
      <FormItem label="Protocol" type="Label & Selector" theme="Dark" status="Normal" layout="1 line" labelWidth="120 px" />
    </div>
  </Surface>
)

export const LabelSwitch = () => (
  <Surface>
    <div style={{ width: 360 }}>
      <FormItem label="Auto-record" type="Label & Switch" theme="Dark" status="Normal" layout="1 line" labelWidth="120 px" />
    </div>
  </Surface>
)

export const LabelCheckbox = () => (
  <Surface>
    <div style={{ width: 360 }}>
      <FormItem label="Low latency" type="Label & checkbox" theme="Dark" status="Normal" layout="1 line" labelWidth="120 px" />
    </div>
  </Surface>
)

export const LabelRadio = () => (
  <Surface>
    <div style={{ width: 360 }}>
      <FormItem label="Encoder" type="Label & Radio" theme="Dark" status="Normal" layout="1 line" labelWidth="120 px" />
    </div>
  </Surface>
)

export const LabelTextarea = () => (
  <Surface>
    <div style={{ width: 360 }}>
      <FormItem label="Description" type="Label & Textarea" theme="Dark" status="Normal" layout="2 lines" labelWidth="120 px" hint="Shown on the public channel page." />
    </div>
  </Surface>
)

export const ErrorStatus = () => (
  <Surface>
    <div style={{ width: 360 }}>
      <FormItem label="Stream Name" type="Label & Input" theme="Dark" status="Error" layout="1 line" labelWidth="120 px" required error="Stream name is required." />
    </div>
  </Surface>
)