"use client"

import { Copy, Check } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useState } from "react"

export function CopyButton({ text }: { text: string }) {
  const [isCopied, setIsCopied] = useState(false)

  const handleCopy = () => {
    navigator.clipboard.writeText(text)
    setIsCopied(true)

    // Reset the copied state after 2 seconds
    setTimeout(() => {
      setIsCopied(false)
    }, 2000)
  }

  return (
    <Button
      variant="outline"
      size="sm"
      className="relative group h-8 overflow-hidden transition-all duration-300"
      onClick={handleCopy}
    >
      <span
        className={`flex items-center gap-1.5 transition-transform duration-200 ${
          isCopied ? "transform -translate-y-10 opacity-0" : ""
        }`}
      >
        <Copy className="h-3.5 w-3.5" />
        Copy
      </span>

      <span
        className={`absolute inset-0 flex items-center justify-center gap-1.5 transition-transform duration-200 ${
          isCopied ? "transform translate-y-0" : "transform translate-y-10 opacity-0"
        }`}
      >
        <Check className="h-3.5 w-3.5 text-green-500" />
        Copied!
      </span>
    </Button>
  )
}
