import { AVATAR_SHAPES } from "@rakazo/contracts";
import { BotAvatar } from "@rakazo/ui-web";
import { createRoot } from "react-dom/client";

createRoot(document.getElementById("root")!).render(
  <main
    style={{
      minHeight: "100vh",
      display: "grid",
      gridTemplateColumns: "repeat(4, 120px)",
      alignItems: "center",
      justifyContent: "center",
      gap: 28,
      background: "#101012",
    }}
  >
    {AVATAR_SHAPES.map((shape) => (
      <BotAvatar
        key={shape}
        color="#D9508A"
        identity={`motion-${shape}`}
        size={120}
        shape={shape}
        status="running"
        variant="organic"
      />
    ))}
  </main>,
);