import React from "react";
import styles from "./index.less";
import { Rate } from "antd";

const desc = ["terrible", "bad", "normal", "good", "wonderful"];

class Rater extends React.Component {
  state = {
    value: 3
  };

  handleChange = value => {
    this.setState({ value });
  };

  render() {
    const { value } = this.state;
    return (
      <span>
        <Rate tooltips={desc} onChange={this.handleChange} value={value} />
        {value ? <span className="ant-rate-text">{desc[value - 1]}</span> : ""}
      </span>
    );
  }
}

export default () => (
  <div className={styles.container}>
    <div id="components-rate-demo-text">
      <Rater />
    </div>
  </div>
);