'use client';
import { Check, Code2 } from 'lucide-react';
import { useState } from 'react';
import { t } from '@/i18n';
import { SITE_URL } from '@/lib/site';

/** Copies the absolute API URL of the entity (country / indicator) to the clipboard; falls back to opening it. */
export function CopyApiButton({ path, className }: { path: string; className?: string }) {
  const [done, setDone] = useState(false);
  const url = `${SITE_URL}${path}`;
  const copy = async () => {
    try {
      await navigator.clipboard.writeText(url);
      setDone(true);
      setTimeout(() => setDone(false), 1800);
    } catch {
      window.open(path, '_blank', 'noopener');
    }
  };
  return (
    <button type="button" onClick={copy} className={`inline-flex h-10 items-center justify-center gap-2 rounded-sm border border-rule px-4 text-sm text-ink hover:bg-surface-2 ${className ?? ''}`} aria-live="polite" title={url}>
      {done ? <Check size={15} aria-hidden className="text-up" /> : <Code2 size={15} aria-hidden />}
      {done ? t('common.copied') : t('country.api')}
    </button>
  );
}