'use client';

import { getToolName } from 'ai';
import {
  Tool,
  ToolContent,
  ToolHeader,
  ToolInput,
  ToolOutput,
} from '@/components/ai-elements/tool';
import { Loader } from '@/components/ai-elements/loader';
import { toolComponents } from './registry';
import type { ToolComponentProps } from './types';

export function ToolPartRenderer({ part }: Pick<ToolComponentProps, 'part'>) {
  const toolName = getToolName(part);
  const CustomRenderer = toolComponents[toolName];

  if (CustomRenderer) {
    return <CustomRenderer part={part} toolName={toolName} />;
  }

  if (part.state === 'input-streaming' && !part.input) {
    return (
      <div className="mb-4 flex items-center gap-2 text-muted-foreground text-sm">
        <Loader size={14} />
        <span>Running {toolName}...</span>
      </div>
    );
  }

  return (
    <Tool>
      <ToolHeader
        title={toolName}
        type={part.type === 'dynamic-tool' ? `tool-${toolName}` : part.type}
        state={part.state}
      />
      <ToolContent>
        {part.input != null && <ToolInput input={part.input} />}
        <ToolOutput output={part.output} errorText={part.errorText} />
      </ToolContent>
    </Tool>
  );
}