import { Notification } 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 DialogSuccess = () => (
  <Surface>
    <Notification
      form="dialog"
      type="success"
      theme="dark"
      title="Stream started"
      description="Channel 1 is now live and broadcasting to all endpoints."
      closable
      confirmText="View monitor"
      cancelText="Dismiss"
    />
  </Surface>
)

export const AlertDanger = () => (
  <Surface>
    <Notification
      form="alert"
      type="danger"
      theme="dark"
      title="Connection lost"
      description="Reconnecting to the encoder — retrying in 5 seconds."
      closable
    />
  </Surface>
)

export const PopConfirmWarning = () => (
  <Surface>
    <Notification
      form="pop confirm"
      type="warning"
      theme="dark"
      title="Stop this stream?"
      description="All viewers will be disconnected immediately."
      confirmText="Stop stream"
      cancelText="Keep live"
    />
  </Surface>
)

export const SlideInfo = () => (
  <Surface>
    <Notification
      form="slide"
      type="info"
      theme="dark"
      title="New source available"
      description="An SRT source just came online in your input pool."
      closable
    />
  </Surface>
)