import { Hammer } from "lucide-react";
import { FC, ReactNode } from "react";
import { PrettyJson } from "~/components/PrettyJson";

export const Title: FC<{ children: ReactNode }> = ({ children }) => {
  return <h1 className={"flex flex-row items-center gap-2 text-xl"}>{children}</h1>;
};

export const Content: FC<{ children: ReactNode }> = ({ children }) => {
  return <div className={"bg-secondary whitespace-pre-wrap rounded-xl px-8 py-4"}>{children}</div>;
};

export const MessagesContainer: FC<{ children: ReactNode; sortAscending: boolean }> = ({ children, sortAscending }) => {
  return <div className={`flex ${sortAscending ? "flex-col" : "flex-col-reverse"} gap-4`}>{children}</div>;
};

export const Message: FC<{ children: ReactNode }> = ({ children }) => {
  return <div className={"flex flex-col gap-1"}>{children}</div>;
};

export type ToolCall = {
  name: string;
  args: { parameter: string; value: string | number }[];
};
export const ToolCallsComponent: FC<{ toolCalls: ToolCall[] }> = ({ toolCalls }) => {
  return (
    <div className={"flex flex-col gap-2"}>
      {toolCalls.map((toolCall, index) => {
        return (
          <div key={index} className={"bg-secondary flex flex-col rounded-xl px-3 py-2"}>
            <div className="flex items-center gap-1 text-base">
              <Hammer size={16} /> {toolCall.name}
            </div>
            <div className={"flex flex-row gap-1"}>
              <PrettyJson data={toolCall.args} shouldTruncate={false} />
            </div>
          </div>
        );
      })}
    </div>
  );
};
