/**
 * 點擊複製按鈕組件
 */

import { useState } from "react";
import { Check, Copy } from "lucide-react";
import { Button } from "@/Components/ui/button";
import {
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger,
} from "@/Components/ui/tooltip";
import { toast } from "sonner";

interface CopyButtonProps {
    text: string;
    label?: string;
    className?: string;
}

export default function CopyButton({ text, label = "複製", className }: CopyButtonProps) {
    const [copied, setCopied] = useState(false);

    const handleCopy = async () => {
        try {
            await navigator.clipboard.writeText(text);
            setCopied(true);
            toast.success(`${label}已複製`);
            setTimeout(() => setCopied(false), 2000);
        } catch (err) {
            toast.error("複製失敗");
        }
    };

    return (
        <TooltipProvider>
            <Tooltip>
                <TooltipTrigger asChild>
                    <Button
                        variant="ghost"
                        size="icon"
                        className={`h-6 w-6 p-0 hover:bg-gray-100 ${className}`}
                        onClick={handleCopy}
                    >
                        {copied ? (
                            <Check className="h-3.5 w-3.5 text-green-600" />
                        ) : (
                            <Copy className="h-3.5 w-3.5 text-gray-400" />
                        )}
                        <span className="sr-only">{label}</span>
                    </Button>
                </TooltipTrigger>
                <TooltipContent>
                    <p>{copied ? "已複製！" : label}</p>
                </TooltipContent>
            </Tooltip>
        </TooltipProvider>
    );
}