import type { CopyButtonProps } from '../types/types';

function CopyButton({
  label,
  copiedLabel,
  isCopied,
  onClick,
}: CopyButtonProps) {
  const btn =
    "toolbar-btn relative px-3 py-1.5 text-sm rounded border transition cursor-pointer";

  return (
    <button type="button" className={btn} onClick={onClick}>
      <span className="invisible">{label}</span>
      <span
        className={`absolute inset-0 flex items-center justify-center transition-colors ${
          isCopied ? "toolbar-btn-green" : ""
        }`}
        style={isCopied ? undefined : { color: "var(--fg)" }}
      >
        {isCopied ? copiedLabel : label}
      </span>
    </button>
  );
}

export default CopyButton;