"use client";

import { useState } from "react";

export function CopyLinkButton({ anchor }: { anchor: string }) {
  const [copied, setCopied] = useState(false);

  const onClick = async () => {
    try {
      const { origin, pathname } = window.location;
      await navigator.clipboard.writeText(`${origin}${pathname}#${anchor}`);
      setCopied(true);
      window.setTimeout(() => setCopied(false), 1200);
    } catch {
      // clipboard write failed — silently no-op; user can still click the heading
    }
  };

  return (
    <button
      type="button"
      onClick={onClick}
      aria-label={`Copy link to ${anchor}`}
      className="ml-2 align-middle inline-flex items-center gap-1 text-xs font-normal text-muted-foreground hover:text-foreground transition-colors"
    >
      {copied ? (
        <span aria-hidden="true">Copied</span>
      ) : (
        <svg
          aria-hidden="true"
          width="14"
          height="14"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
          <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
        </svg>
      )}
    </button>
  );
}