"use client";

import { useState } from "react";

interface HashDisplayProps {
  hash: string;
  label: string;
}

export function HashDisplay({ hash, label }: HashDisplayProps) {
  const [copied, setCopied] = useState(false);
  const short = hash.length > 12 ? hash.slice(0, 8) + "..." + hash.slice(-4) : hash;

  const handleCopy = () => {
    navigator.clipboard.writeText(hash);
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  };

  return (
    <div className="flex items-center gap-2 text-xs">
      <span className="text-muted-foreground">{label}:</span>
      <code className="font-mono bg-muted px-1.5 py-0.5 rounded text-[10px]">
        {short}
      </code>
      <button
        onClick={handleCopy}
        className="text-muted-foreground hover:text-foreground transition-colors"
        title="Copy to clipboard"
      >
        {copied ? "✓" : "⧉"}
      </button>
    </div>
  );
}
