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

const Surface = ({ children }: any) => (
  <div style={{ background: 'var(--bg-layer1)', padding: 20, borderRadius: 8 }}>
    {children}
  </div>
)

const columns = [
  { key: 'name', title: 'Stream', align: 'left' as const },
  { key: 'status', title: 'Status', align: 'left' as const },
  { key: 'protocol', title: 'Protocol', align: 'left' as const },
  { key: 'bitrate', title: 'Bitrate', align: 'right' as const },
  { key: 'viewers', title: 'Viewers', align: 'right' as const },
]

const rows = [
  { name: 'Studio A — Main', status: 'On-air', protocol: 'SRT', bitrate: '8.2 Mbps', viewers: '12,480' },
  { name: 'Studio B — Backup', status: 'Standby', protocol: 'RTMP', bitrate: '6.0 Mbps', viewers: '0' },
  { name: 'Field Unit 3', status: 'On-air', protocol: 'HEVC', bitrate: '4.5 Mbps', viewers: '3,201' },
  { name: 'Remote Guest', status: 'Idle', protocol: 'WebRTC', bitrate: '—', viewers: '0' },
]

export const StreamStatus = () => (
  <Surface>
    <Table type="Header" align="Left" columns={columns} data={rows} />
  </Surface>
)

export const Striped = () => (
  <Surface>
    <Table type="Header" align="Left" columns={columns} data={rows} striped />
  </Surface>
)