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

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

// Message content is generated INTERNALLY — no children (mirrors App.tsx).
export const Statuses = () => (
  <Surface>
    <Message status="success" size="L" closable />
    <Message status="info" size="L" closable />
    <Message status="error" size="L" closable />
    <Message status="warning" size="L" closable />
  </Surface>
)

export const SizeM = () => (
  <Surface>
    <Message status="success" size="M" closable />
    <Message status="warning" size="M" closable />
  </Surface>
)

export const SizeL = () => (
  <Surface>
    <Message status="info" size="L" closable />
    <Message status="error" size="L" closable />
  </Surface>
)