import React, { Component } from 'react';
import copy from 'clipboard-copy';

export default class ColorSwatch extends Component {
  render() {
    const { hex, label, ...attrs } = this.props;
    return (
      <div {...attrs} className="ColorSwatch" style={{...(attrs.style||{}), display: 'inline-flex', alignItems: 'center'}}>
        <span onClick={() => copy(hex)} style={{
          display: 'inline-block',
          width: '3em',
          height: '3em',
          borderRadius: '3em',
          background: hex,
        }}/>
        <span style={{lineHeight: 1, paddingLeft: '.5em'}}>
          <div>{label}</div>
          <small>
            <code>{hex}</code>
          </small>
        </span>
      </div>
    );
  }
};