import * as React from "react";
import type { A2UIComponent } from "@ffai/agent-protocol";

export interface A2UIRendererProps {
  readonly component: A2UIComponent;
  readonly onAction?: (actionId: string) => void;
}

// PR0.5 骨架：所有组件先输出 fallback 文本占位 + 类型标记 div。
// PR1 起逐个换成 Lark DS 真实组件（Table/Chart/Form/Card）。
export const A2UIRenderer: React.FC<A2UIRendererProps> = ({ component }) => {
  return (
    <div data-a2ui-type={component.type} data-a2ui-id={component.id}>
      <span data-a2ui-fallback>{component.fallback.text}</span>
      {component.fallback.url ? (
        <a href={component.fallback.url} target="_blank" rel="noreferrer">
          {component.fallback.url}
        </a>
      ) : null}
    </div>
  );
};