#OccupancyList

import { useState } from 'react';
import { MarkStageProvider } from '@aora-bot/react';
import { OccupancyList, type OccupancyRow } from '@aora-bot/surfaces';

const rows: OccupancyRow[] = [
  {
    id: 'repo',
    label: '代码库，main',
    agents: [
      { id: 'ada', name: 'Ada' },
      { id: 'grace', name: 'Grace' },
      { id: 'alan', name: 'Alan' },
    ],
  },
  {
    id: 'browser',
    label: '浏览器会话',
    agents: [{ id: 'grace', name: 'Grace' }],
    state: 'searching',
  },
  {
    id: 'db',
    label: '预发数据库',
    agents: Array.from({ length: 7 }, (_, i) => ({ id: `worker-${i}`, name: `Worker ${i + 1}` })),
  },
  { id: 'mic', label: '麦克风', agents: [] },
];

export default function Demo() {
  const [picked, setPicked] = useState<string | null>(null);
  return (
    <MarkStageProvider>
      <div className="site-demo site-demo--column">
        <OccupancyList rows={rows} onSelect={(agent, row) => setPicked(`${agent.name} 在 ${row.label}`)} />
        <span className="site-demo__label">{picked ?? '点一张脸'}</span>
      </div>
    </MarkStageProvider>
  );
}