import { SelectBoxLine } 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>
)

const channels = [
  { label: 'Studio A — Main', value: 'studio-a' },
  { label: 'Studio B — Backup', value: 'studio-b' },
  { label: 'Field Unit 3', value: 'field-3' },
  { label: 'Remote Guest', value: 'remote' },
]

export const Placeholder = () => (
  <Surface>
    <SelectBoxLine darkTheme="on" size="M" status="Placeholder" enable="on" ux="default" feature="default" placeholder="Select channel" options={channels} value="" />
  </Surface>
)

export const Selected = () => (
  <Surface>
    <SelectBoxLine darkTheme="on" size="M" status="Value" enable="on" ux="default" feature="default" options={channels} value="studio-a" />
  </Surface>
)

export const Sizes = () => (
  <Surface>
    <SelectBoxLine darkTheme="on" size="M" status="Value" enable="on" ux="default" feature="default" options={channels} value="field-3" />
    <SelectBoxLine darkTheme="on" size="L" status="Value" enable="on" ux="default" feature="default" options={channels} value="field-3" />
  </Surface>
)

export const Error = () => (
  <Surface>
    <SelectBoxLine darkTheme="on" size="M" status="Placeholder" enable="on" ux="error" feature="default" placeholder="Channel required" options={channels} value="" />
  </Surface>
)

export const Disabled = () => (
  <Surface>
    <SelectBoxLine darkTheme="on" size="M" status="Value" enable="off" ux="default" feature="default" options={channels} value="remote" />
  </Surface>
)