AI Tool Selector

"use client";

import React, { useState } from "react";
import { Wrench, Globe, Code, FileText, Search, Settings2 } from "lucide-react";

const tools = [
    { id: "web_search", name: "Web Search", desc: "Access real-time information via Google Search", icon: <Globe className="h-4 w-4 text-blue-500" /> },
    { id: "code_interpreter", name: "Code Interpreter", desc: "Execute Python code and generate charts", icon: <Code className="h-4 w-4 text-emerald-500" /> },
    { id: "file_parsing", name: "File Parsing", desc: "Analyze PDF, CSV, and Markdown documents", icon: <FileText className="h-4 w-4 text-amber-500" /> },
    { id: "custom_api", name: "Internal API", desc: "Query your organization's private databases", icon: <Settings2 className="h-4 w-4 text-zinc-500" /> },
];

export default function AIToolSelector() {
    const [selectedTools, setSelectedTools] = useState<string[]>(["web_search", "code_interpreter"]);

    const toggleTool = (id: string) => {
        setSelectedTools(prev =>
            prev.includes(id) ? prev.filter(t => t !== id) : [...prev, id]
        );
    };

    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-6 shadow-sm w-full max-w-md mx-auto">
            <div className="flex items-center gap-2 mb-6">
                <Wrench className="h-4 w-4 text-zinc-500" />
                <h3 className="text-sm font-bold text-zinc-900 dark:text-zinc-100">Agent Capabilities</h3>
            </div>

            <div className="space-y-3">
                {tools.map((tool) => (
                    <button
                        key={tool.id}
                        onClick={() => toggleTool(tool.id)}
                        className={`w-full flex items-start gap-3 p-3 rounded-xl border transition-all text-left ${selectedTools.includes(tool.id)
                                ? "border-blue-500/50 bg-blue-500/5 dark:bg-blue-500/10"
                                : "border-zinc-100 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-900/50 hover:border-zinc-200 dark:hover:border-zinc-700"
                            }`}
                    >
                        <div className={`p-2 rounded-lg bg-white dark:bg-zinc-800 shadow-sm ${selectedTools.includes(tool.id) ? "ring-2 ring-blue-500/20" : ""
                            }`}>
                            {tool.icon}
                        </div>
                        <div className="flex-1 min-w-0">
                            <div className="flex items-center justify-between mb-0.5">
                                <span className="text-xs font-bold text-zinc-900 dark:text-zinc-100">{tool.name}</span>
                                <div className={`h-4 w-8 rounded-full relative transition-colors cursor-pointer ${selectedTools.includes(tool.id) ? "bg-blue-600" : "bg-zinc-200 dark:bg-zinc-700"
                                    }`}>
                                    <div className={`absolute top-1 left-1 h-2 w-2 rounded-full bg-white transition-transform ${selectedTools.includes(tool.id) ? "translate-x-4" : ""
                                        }`} />
                                </div>
                            </div>
                            <p className="text-[10px] text-zinc-500 leading-normal">{tool.desc}</p>
                        </div>
                    </button>
                ))}
            </div>
        </div>
    );
}