import styled from 'styled-components';
import { useCopyClipboard } from '../../utils';

import Link from '../../components/common/Link';
import { FiCopy, FiCheckCircle } from 'react-icons/fi';

const CopyIcon = styled(Link)`
  color: ${({ theme }) => theme.silverGray};
  flex-shrink: 0;
  margin-right: 1rem;
  margin-left: 0rem;
  text-decoration: none;
  :hover,
  :active,
  :focus {
    text-decoration: none;
    color: ${({ theme }) => theme.doveGray};
  }
`;
const TransactionStatusText = styled.span`
  margin-left: 0.25rem;
  ${({ theme }) => theme.flexRowNoWrap};
  align-items: center;
`;

export default function CopyHelper({ toCopy, children = null }) {
  const [isCopied, setCopied] = useCopyClipboard();

  return (
    <CopyIcon onClick={() => setCopied(toCopy)}>
      <TransactionStatusText>
        {children} {isCopied ? <FiCheckCircle /> : <FiCopy />}
      </TransactionStatusText>
    </CopyIcon>
  );
}