#AgentCharacterPicker

import { useState } from 'react';
import { AgentAvatar, AgentCharacterPicker, type CharacterChoice } from '@aora-bot/react';

export default function Demo() {
  const [committed, setCommitted] = useState<CharacterChoice>({ shape: 'hex', color: 'blue' });
  const [writes, setWrites] = useState(0);
  return (
    <div className="site-demo site-demo--column">
      <div className="site-demo">
        <AgentAvatar agent={{ id: 'nova', ...committed }} size="xl" />
        <span className="site-demo__label">
          已提交 {committed.shape}、{committed.color}——写入 {writes} 次
        </span>
      </div>
      <AgentCharacterPicker
        value={committed}
        shapes={['blob', 'hex', 'cloud', 'star', 'tofu', 'drop']}
        colors={['blue', 'green', 'orange', 'violet', 'red']}
        onCommit={(next) => {
          setCommitted(next);
          setWrites((n) => n + 1);
        }}
      />
    </div>
  );
}