"use client"
import { Copy, Check } from "lucide-react"
import { useState } from "react"
import { useToast } from "@/hooks/use-toast"
import { useTranslations } from "next-intl"

export function CopyButton({ value }: { value: string }) {
    const [copied, setCopied] = useState(false)
    const { toast } = useToast()
    const t = useTranslations("custom")

    const handleCopy = () => {
        navigator.clipboard.writeText(value)
        setCopied(true)
        toast({
            title: t("copied") || "Copied!",
            description: value,
        })
        setTimeout(() => setCopied(false), 2000)
    }

    return (
        <button 
            onClick={handleCopy} 
            className="p-1.5 hover:bg-gray-100 rounded-md transition-colors text-gray-400 hover:text-gray-600 ml-2 absolute left-0 top-2"
            title="Copy"
        >
            {copied ? <Check className="size-4 text-green-500" /> : <Copy className="size-4" />}
        </button>
    )
}