import React from 'react'
import styled from 'styled-components'
import { CopyToClipboard } from 'react-copy-to-clipboard'

import { Share } from './common/images/share.component'

interface Props {
  text: string
  className?: string
  title?: string
}

const ShareWrapper = styled.div`
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 24px;
  cursor: pointer;
  &:hover {
    background-color: rgb(207, 224, 255, 0.1);
  }
  &:active,
  &:focus-within {
    background-color: rgb(207, 224, 255, 0.2);
  }
`

const ShareImageWrapper = styled(Share)`
  margin-top: 7px;
  margin-left: 7px;
`

export const ShareDeal = (props: Props) => {
  const { text, className, title = 'Click to copy Deal link to share' } = props

  return (
    <CopyToClipboard text={`${window.location.origin}/deal/${text}`}>
      <ShareWrapper className={className} title={title}>
        <ShareImageWrapper />
      </ShareWrapper>
    </CopyToClipboard>
  )
}