'use client';

import { useState } from 'react';

interface PromptReuseButtonProps {
  prompt: string;
  onReuse: (prompt: string) => void;
  label?: string;
}

export function PromptReuseButton({ prompt, onReuse, label }: PromptReuseButtonProps) {
  const [copied, setCopied] = useState(false);

  const handleClick = () => {
    onReuse(prompt);
    setCopied(true);
    setTimeout(() => setCopied(false), 1000);
  };

  return (
    <button
      onClick={handleClick}
      className="group inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-slate-800/50 hover:bg-amber-600/20 border border-slate-700 hover:border-amber-600/50 text-gray-400 hover:text-amber-400 transition-all text-xs"
      aria-label={`Reuse ${label || 'prompt'}`}
      title={`Click to reuse this prompt`}
    >
      {copied ? (
        <>
          <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
          </svg>
          <span className="font-medium">Inserted</span>
        </>
      ) : (
        <>
          <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
            />
          </svg>
          <span className="font-medium">Reuse</span>
        </>
      )}
    </button>
  );
}
