"use client";
import { useState } from "react";

export function CopyableSnippet({ snippet }: { snippet: string }) {
  const [copied, setCopied] = useState(false);
  async function copy() {
    await navigator.clipboard.writeText(snippet);
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  }
  return (
    <div className="relative">
      <pre className="bg-ink-900 border border-white/10 rounded-xl p-5 text-sm font-mono text-brand-400 overflow-x-auto whitespace-pre">{snippet}</pre>
      <button onClick={copy} className="absolute top-3 right-3 bg-ink-800 hover:bg-ink-700 text-xs font-semibold text-white/80 px-3 py-1.5 rounded">
        {copied ? "✓ Copied" : "Copy"}
      </button>
    </div>
  );
}