/**
 * Live preview harness — edit freely. Nothing is saved.
 *
 * - Import any Cinny module via `@cinny/...`
 * - Use mocks / PlaygroundProviders from `@playground/mocks`
 * - `export default` the component to render in the stage
 */
import { Message } from '@cinny/app/features/room/message';
import { MessageLayout } from '@cinny/app/state/settings';
import { Box, Text } from 'folds';
import { mocks } from '@playground/mocks';

export default function Preview() {
  const room = mocks.room;
  const mEvent = mocks.event;

  return (
    <Box direction="Column" gap="200" style={{ width: '100%', maxWidth: 520 }}>
      <Text size="T200" priority="300">
        Preview harness — swap imports to any `@cinny/...` export
      </Text>
      <Message
        room={room}
        mEvent={mEvent}
        collapse={false}
        highlight={false}
        messageLayout={MessageLayout.Modern}
        messageSpacing="400"
        canDelete
        canSendReaction
        canPinEvent
        hour24Clock={false}
        dateFormatString="D MMM YYYY"
        onUserClick={() => undefined}
        onUsernameClick={() => undefined}
        onReplyClick={() => undefined}
        onReactionToggle={() => undefined}
      >
        <Text style={{ margin: 0 }}>{mEvent.getContent().body}</Text>
      </Message>
    </Box>
  );
}