"use client";

import { RiSearch2Line } from "@remixicon/react";
import type { ToolComponentProps } from "./types";
import {
  Task,
  TaskTrigger,
  TaskContent,
  TaskItem,
  TaskItemFile,
} from "@/components/ai-elements/task";

export function FirecrawlWebSearchTool({ part }: ToolComponentProps) {
  const { input, output, state } = part as any;
  const isComplete = state === "output-available";
  const query = input?.query as string | undefined;

  const title = isComplete
    ? `Searched "${query || "the web"}"`
    : `Searching "${query || "the web"}"...`;

  return (
    <Task defaultOpen={false}>
      <TaskTrigger title={title} icon={<RiSearch2Line className="size-4" />} />
      <TaskContent>
        {!isComplete && (
          <TaskItem>Searching...</TaskItem>
        )}
        {isComplete && output?.error && (
          <TaskItem className="text-destructive">{output.error}</TaskItem>
        )}
        {isComplete && output?.results?.map((item: any, i: number) => (
          <TaskItem key={i}>
            <TaskItemFile>
              <a href={item.url} target="_blank" rel="noopener noreferrer">
                {item.title || item.url}
              </a>
            </TaskItemFile>
          </TaskItem>
        ))}
        {isComplete && output?.success && !output.results?.length && (
          <TaskItem>No results found</TaskItem>
        )}
      </TaskContent>
    </Task>
  );
}