import React, { Component } from 'react'
import { writeToClipboard } from 'app/utils'

export default class CopyToClipboardButton extends Component {
  state = {
    copied: false,
  }

  handleClick() {
    writeToClipboard(this.props.data)
    this.setState({ copied: true })
  }

  render() {
    return (
      <button
        className={this.state.copied ? 'copyButton copied' : 'copyButton'}
        onClick={this.handleClick.bind(this)}
      >
        {this.state.copied ? 'Copied!' : 'Copy'}
      </button>
    )
  }
}