'use client';
import { useState } from 'react';
import { motion } from 'framer-motion';

interface MinimalCopyButtonProps {
  text?: string;
  onCopy?: () => void;
}

export default function MinimalCopyButton({ 
  text = 'npm install velocity-ui', 
  onCopy 
}: MinimalCopyButtonProps) {
  const [copied, setCopied] = useState(false);

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

  return (
    <div className="flex items-center justify-center p-10 bg-neutral-50 dark:bg-neutral-950 rounded-xl font-sans">
      <button
        onClick={handleCopy}
        className="relative group flex items-center gap-3 px-4 py-2.5 bg-white dark:bg-black border border-neutral-200 dark:border-neutral-800 rounded-lg shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all duration-200 active:scale-95 active:translate-y-0"
      >
        <div className="w-1 h-full absolute left-0 top-0 bottom-0 bg-neutral-900 dark:bg-white rounded-l-lg opacity-0 group-hover:opacity-100 transition-opacity" />
        
        <code className="font-mono text-sm text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-900 dark:group-hover:text-white transition-colors">
          {text}
        </code>

        <div className="w-px h-4 bg-neutral-200 dark:bg-neutral-800 mx-1" />

        <div className="relative w-4 h-4 flex items-center justify-center">
            <motion.svg
              initial={{ opacity: 1, scale: 1 }}
              animate={{ opacity: copied ? 0 : 1, scale: copied ? 0.5 : 1 }}
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="absolute text-neutral-400 group-hover:text-neutral-600 dark:group-hover:text-neutral-300"
            >
              <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
              <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
            </motion.svg>

            <motion.svg
              initial={{ opacity: 0, scale: 0.5 }}
              animate={{ opacity: copied ? 1 : 0, scale: copied ? 1 : 0.5 }}
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="absolute text-green-500"
            >
              <polyline points="20 6 9 17 4 12" />
            </motion.svg>
        </div>
      </button>
    </div>
  );
}