import React from 'react'
import { IoCopyOutline } from 'react-icons/io5'
import styled from 'styled-components'

export type CopyProps = {
  textToCopy: string 
  css?: string 
};

export const Copy = ({ textToCopy,css }: CopyProps):JSX.Element => {
  const handleCopy = () => {
    navigator.clipboard.writeText(textToCopy)
  }

  return (
    <CopyIcon onClick={handleCopy} css={css}/>
  )
}

const CopyIcon = styled(IoCopyOutline)<{css?: string}>`
  cursor: pointer;
  width: 14px;
  height: 17px;

  ${(p) => p.css}
`