AI Response Actions

"use client";

import React, { useState } from "react";
import { Copy, RotateCcw, ThumbsUp, ThumbsDown, Share2, Check } from "lucide-react";

interface AIResponseActionsProps {
  content: string;
  onRegenerate?: () => void;
}

export default function AIResponseActions({ content, onRegenerate }: AIResponseActionsProps) {
  const [copied, setCopied] = useState(false);
  const [feedback, setFeedback] = useState<"up" | "down" | null>(null);

  const handleCopy = async () => {
    await navigator.clipboard.writeText(content);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const actions = [
    {
      icon: copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />,
      label: copied ? "Copied!" : "Copy",
      onClick: handleCopy,
    },
    { icon: <RotateCcw className="h-3.5 w-3.5" />, label: "Regenerate", onClick: onRegenerate },
    {
      icon: <ThumbsUp className={`h-3.5 w-3.5 ${feedback === "up" ? "fill-current" : ""}`} />,
      label: "Good",
      onClick: () => setFeedback(feedback === "up" ? null : "up"),
      active: feedback === "up",
    },
    {
      icon: <ThumbsDown className={`h-3.5 w-3.5 ${feedback === "down" ? "fill-current" : ""}`} />,
      label: "Bad",
      onClick: () => setFeedback(feedback === "down" ? null : "down"),
      active: feedback === "down",
    },
    { icon: <Share2 className="h-3.5 w-3.5" />, label: "Share", onClick: () => {} },
  ];

  return (
    <div className="flex items-center gap-0.5">
      {actions.map((action, i) => (
        <button
          key={i}
          onClick={action.onClick}
          title={action.label}
          className={`p-1.5 rounded-md transition-colors ${
            action.active
              ? "text-violet-500 bg-violet-50 dark:bg-violet-900/20"
              : "text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800"
          }`}
        >
          {action.icon}
        </button>
      ))}
    </div>
  );
}