'use client';

import { useTranslations } from 'next-intl';

import { Check, Copy } from 'lucide-react';

import { useCopyToClipboard } from '@/hooks/useCopyToClipboard';
import { linkFocusRing } from '@/components/ui/app-link';
import { cn } from '@/lib/utils';

/* ============================================================================
   COPY BUTTON — icon button that copies `value` and confirms with a check.
   ----------------------------------------------------------------------------
   Thin wrapper over `useCopyToClipboard`: shows a copy glyph, swaps to a check
   for ~2s after a successful copy, and announces state via aria-label/title.
   ========================================================================== */

interface CopyButtonProps {
  /** the text written to the clipboard */
  value: string;
  className?: string;
}

export function CopyButton({ value, className }: CopyButtonProps) {
  const t = useTranslations('accessibility');
  const { copied, copy } = useCopyToClipboard();

  return (
    <button
      type="button"
      onClick={() => copy(value)}
      aria-label={copied ? t('copied') : t('copy')}
      title={copied ? t('copied') : t('copy')}
      className={cn(
        'inline-flex size-6 shrink-0 items-center justify-center text-brand-primary/55 transition-colors hover:text-brand-primary',
        linkFocusRing,
        className
      )}
    >
      {copied ? (
        <Check className="size-3.5 text-brand-blue" aria-hidden="true" />
      ) : (
        <Copy className="size-3.5" aria-hidden="true" />
      )}
    </button>
  );
}

export default CopyButton;