AI Agent Feedback Loop

"use client";

import React, { useState } from "react";
import { ThumbsUp, ThumbsDown, MessageSquare, Send } from "lucide-react";

export default function AIAgentFeedback() {
    const [rated, setRated] = useState<"up" | "down" | null>(null);

    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">
            <h3 className="text-sm font-bold text-zinc-900 dark:text-zinc-100 mb-2">Help us improve</h3>
            <p className="text-xs text-zinc-500 mb-6 font-medium">Was this response accurate and helpful?</p>

            <div className="flex gap-2 mb-8">
                <button
                    onClick={() => setRated("up")}
                    className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl border transition-all ${rated === "up" ? "bg-emerald-50 border-emerald-500 text-emerald-600" : "bg-white border-zinc-200 text-zinc-400 hover:border-zinc-300"
                        }`}
                >
                    <ThumbsUp className={`h-4 w-4 ${rated === "up" ? "fill-current" : ""}`} />
                    <span className="text-xs font-bold">Yes</span>
                </button>
                <button
                    onClick={() => setRated("down")}
                    className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl border transition-all ${rated === "down" ? "bg-red-50 border-red-500 text-red-600" : "bg-white border-zinc-200 text-zinc-400 hover:border-zinc-300"
                        }`}
                >
                    <ThumbsDown className={`h-4 w-4 ${rated === "down" ? "fill-current" : ""}`} />
                    <span className="text-xs font-bold">No</span>
                </button>
            </div>

            <div className="relative">
                <textarea
                    placeholder="Tell us what could be better..."
                    className="w-full rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900 p-4 text-xs focus:outline-none focus:ring-2 focus:ring-zinc-900/5 resize-none h-24"
                />
                <button className="absolute bottom-3 right-3 p-2 rounded-lg bg-zinc-900 text-white hover:opacity-90 transition-all">
                    <Send className="h-3.5 w-3.5" />
                </button>
            </div>
        </div>
    );
}