'use client';

import { useCopyToClipboard } from '@/app/hooks/useCopyToClipboard';
import { useT } from './ContentProvider';
import { CheckIcon, CopyIcon } from './icons';
import { cx } from './ui';

/** Copies `text` to the clipboard and briefly confirms. */
export function CopyButton({ text }: { text: string }) {
  const t = useT();
  const { copied, copy } = useCopyToClipboard();
  return (
    <button
      onClick={() => copy(text)}
      className={cx('flex cursor-pointer items-center gap-[5px] rounded-[7px] border border-edge bg-transparent px-2.5 py-[5px] text-[13px] transition-all', copied ? 'text-success' : 'text-muted')}
    >
      {copied ? <><CheckIcon />{t('copy.copied')}</> : <><CopyIcon />{t('copy.copy')}</>}
    </button>
  );
}