import { styled } from '../../styles';
import { InlineFlex } from '../InlineFlex';

export const CopyText = styled(InlineFlex)<{
  copied: boolean;
  noIcon?: boolean;
}>`
  position: relative;
  cursor: pointer;

  &::after {
    content: 'Copied';
    position: absolute;
    ${(props) =>
      props.noIcon
        ? `
          bottom: -25px;
          left: 50%;
          transform: translateX(-50%);`
        : `
          top: -18px;
          right: -13px;
    `};
    margin: 0;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    border-radius: 8px;
    line-height: normal;
    font-size: 9px;
    font-weight: bold;
    white-space: nowrap;
    pointer-events: none;
    opacity: ${(props) => (props.copied ? 1 : 0)};
  }

  ${(props) =>
    props.copied
      ? ''
      : props.noIcon
      ? `&:hover {
           &::after {
             content: 'Click to copy';
             opacity: 1;
             transition: opacity 0.3s;
           }
         }`
      : ''};
`;
