import type { ReactNode } from "react";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { toast } from "sonner";

export function ToolCard({ title, children }: { title: string; children: ReactNode }) {
  return <Card className="border-border/50"><CardHeader><CardTitle className="text-base">{title}</CardTitle></CardHeader><CardContent className="space-y-4">{children}</CardContent></Card>;
}
export function QueryError({ error }: { error: unknown }) {
  return error ? <p role="alert" className="text-sm text-destructive">Couldn't load this tool. Check your connection and try again.</p> : null;
}
export function useToolAction() {
  const client = useQueryClient();
  return useMutation({
    mutationFn: (action: () => Promise<unknown>) => action(),
    onSuccess: () => { void client.invalidateQueries(); toast.success("Saved"); },
    onError: (error: Error) => toast.error(error.message || "Couldn't save. Please retry."),
  });
}