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

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

// TopBar needs a width wrapper (mirrors App.tsx width:520).
export const AfterLogin = () => (
  <Surface>
    <div style={{ width: 640 }}>
      <TopBar tag="After Login" title="TVU Command Center" showMenu showSearchBox />
    </div>
  </Surface>
)

export const AfterLoginNoSearch = () => (
  <Surface>
    <div style={{ width: 640 }}>
      <TopBar tag="After Login" title="Live Streams" showMenu showSearchBox={false} />
    </div>
  </Surface>
)

export const BeforeLogin = () => (
  <Surface>
    <div style={{ width: 640 }}>
      <TopBar tag="Before Login" title="TVU Networks" showMenu={false} showSearchBox={false} />
    </div>
  </Surface>
)