import { useCallback } from 'react';

import type { FC } from 'react';
import type { ClickableProps } from '../Clickable';

import copyToClipboard from '~/src/lib/utils/copyToClipboard';
import Clickable from '../Clickable';
import { useAppToast } from '../NextApp/lib/CoreUi';

interface ClickToCopyProps extends Omit<ClickableProps, 'href'> {
  value: string;
  toastText?: string;
}

const ClickToCopy: FC<ClickToCopyProps> = ({
  value,
  toastText = 'Copied to clipboard',
  ...clickableProps
}) => {
  const appToast = useAppToast();

  return (
    <Clickable
      {...clickableProps}
      onClick={useCallback((event) => {
        copyToClipboard(value);

        clickableProps.onClick?.(event);

        appToast({
          timeoutSecs: 1.3,
          text: toastText,
        });
      }, [])}
    />
  );
};

export default ClickToCopy;