AI Response Actions

import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
import { Copy, RefreshCcw, ThumbsUp, ThumbsDown, Share2 } from "lucide-react";

interface AIResponseWithActionsProps {
    author?: string;
    avatar?: string;
    text?: string;
}

export default function AIResponseWithActions({
    author = "ChatGPT",
    avatar = "https://i.pravatar.cc/40?img=12",
    text = "This is a sample AI response with interactive actions.",
}: AIResponseWithActionsProps) {
    const [copied, setCopied] = useState(false);
    const [liked, setLiked] = useState(false);
    const [disliked, setDisliked] = useState(false);

    const handleCopy = () => {
        navigator.clipboard.writeText(text);
        setCopied(true);
        setTimeout(() => setCopied(false), 1500);
    };

    const handleLike = () => {
        setLiked((prev) => !prev);
        if (disliked) setDisliked(false);
    };

    const handleDislike = () => {
        setDisliked((prev) => !prev);
        if (liked) setLiked(false);
    };

    const handleRegenerate = () => {
        console.log("Regenerate response clicked");
    };

    const handleShare = () => {
        console.log("Share response clicked");
    };

    return (
        <Card className="border-0 w-full">
            <CardContent className="flex flex-col gap-2 p-3">
                {/* Message Bubble */}
                <div className="flex items-start gap-3">
                    <Avatar>
                        <AvatarImage src={avatar} />
                        <AvatarFallback>{author[0]}</AvatarFallback>
                    </Avatar>
                    <div className="bg-gray-100 text-gray-900 p-3 rounded-lg flex-1">
                        {text}
                    </div>
                </div>

                {/* Action Bar */}
                <div className="flex items-center gap-2 mt-1">
                    {/* Copy */}
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <Button size="sm" variant="outline" onClick={handleCopy}>
                                <Copy className="w-4 h-4" />
                            </Button>
                        </TooltipTrigger>
                        <TooltipContent>{copied ? "Copied!" : "Copy"}</TooltipContent>
                    </Tooltip>

                    {/* Regenerate */}
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <Button size="sm" variant="outline" onClick={handleRegenerate}>
                                <RefreshCcw className="w-4 h-4" />
                            </Button>
                        </TooltipTrigger>
                        <TooltipContent>Regenerate</TooltipContent>
                    </Tooltip>

                    {/* Thumbs Up */}
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <Button
                                size="sm"
                                variant={liked ? "default" : "outline"}
                                onClick={handleLike}
                            >
                                <ThumbsUp className="w-4 h-4" />
                            </Button>
                        </TooltipTrigger>
                        <TooltipContent>{liked ? "Liked" : "Like"}</TooltipContent>
                    </Tooltip>

                    {/* Thumbs Down */}
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <Button
                                size="sm"
                                variant={disliked ? "destructive" : "outline"}
                                onClick={handleDislike}
                            >
                                <ThumbsDown className="w-4 h-4" />
                            </Button>
                        </TooltipTrigger>
                        <TooltipContent>{disliked ? "Disliked" : "Dislike"}</TooltipContent>
                    </Tooltip>

                    {/* Share */}
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <Button size="sm" variant="outline" onClick={handleShare}>
                                <Share2 className="w-4 h-4" />
                            </Button>
                        </TooltipTrigger>
                        <TooltipContent>Share</TooltipContent>
                    </Tooltip>
                </div>
            </CardContent>
        </Card>
    );
}