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

// Extra vertical/horizontal padding so the open tooltip bubble is not clipped.
const Surface = ({ children }: any) => (
  <div style={{ background: 'var(--bg-layer1)', padding: '56px 48px', display: 'flex', gap: 48, flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center', borderRadius: 8 }}>
    {children}
  </div>
)

const Target = ({ children }: any) => (
  <span style={{ padding: '4px 8px', border: '1px dashed var(--line-border)', borderRadius: 6 }}>{children}</span>
)

// Author with `open` so the tooltip bubble is visible in the static card.
export const CenterDown = () => (
  <Surface>
    <Tooltip darkTheme="on" pointing="Center down" content="Stream is live and healthy" open>
      <Target>On-air status</Target>
    </Tooltip>
  </Surface>
)

export const CenterUp = () => (
  <Surface>
    <Tooltip darkTheme="on" pointing="Center up" content="Bitrate averaged over 60s" open>
      <Target>Bitrate</Target>
    </Tooltip>
  </Surface>
)

export const RightDown = () => (
  <Surface>
    <Tooltip darkTheme="on" pointing="right down" content="Reconnecting to the encoder" open>
      <Target>Source</Target>
    </Tooltip>
  </Surface>
)