import React, { Component } from 'react';
import Assets from '@src/components/Assets';
import './index.less';

export default class Calculator extends Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  render() {
    return (
      <div className="calculator">
        <div className="line">
          <div className="block block-1 value">{this.state.value}</div>
        </div>
        <div className="line">
          <div className="block block-2 left">
            <Assets name="eliminate_icon" />
          </div>
          <div className="block block-3 right">Clear</div>
        </div>
        <div className="line">
          <div className="block block-1 left">7</div>
          <div className="block block-1 center">8</div>
          <div className="block block-1 center">9</div>
          <div className="block block-2 right">/</div>
        </div>
        <div className="line">
          <div className="block block-1 left">4</div>
          <div className="block block-1 center">5</div>
          <div className="block block-1 center">6</div>
          <div className="block block-2 right">*</div>
        </div>
        <div className="line">
          <div className="block block-1 left">1</div>
          <div className="block block-1 center">2</div>
          <div className="block block-1 center">3</div>
          <div className="block block-2 right">-</div>
        </div>
        <div className="line">
          <div className="block block-1 left">0</div>
          <div className="block block-1 center">.</div>
          <div className="block block-1 center">=</div>
          <div className="block block-2 right">+</div>
        </div>
      </div>
    );
  }
}