import React from "react";
import { DiscordUI, Message } from "@arcscord/discord-ui";
import "@arcscord/discord-ui/styles.css";

const previewTheme = "dark";

const welcome = {
  "id": "welcome",
  "reactions": [
    {
      "id": "wave",
      "emoji": {
        "name": "👋"
      },
      "count": 8
    },
    {
      "id": "heart",
      "emoji": {
        "name": "❤️"
      },
      "count": 3,
      "me": true
    }
  ],
  "author": {
    "id": "welcome-bot",
    "displayName": "Arcscord",
    "bot": true,
    "avatarUrl": "/generated/avatars/arcscord.svg",
    "color": "#a7a9ff"
  },
  "timestamp": "2026-11-01T10:24:00Z",
  "body": {
    "kind": "markdown",
    "content": "## Welcome to the community, <@123456789012345678>!\nYour next great conversation starts here.\n\n> ||This is a spoiler — click to reveal.||"
  }
};

const Example = (() => <Message message={welcome} />);

export default function Preview({ theme = previewTheme } = {}) {
  return (
    <DiscordUI theme={theme} locale="en-US" timeZone="UTC"
      entities={{"users":{"123456789012345678":{"name":"Inès"}}}}>
      <Example theme={theme} />
    </DiscordUI>
  );
}