import React from 'react';
import PropTypes from 'prop-types';

import styles from './CustomTick.module.scss';

function CustomTick(props) {
  return (
    <g transform={`translate(${props.x},${props.y})`}>
      <text x={0} y={0} dy={10} className={styles.Text}>
        <tspan textAnchor="middle" x="0">
          {props.payload.value}
        </tspan>
      </text>
    </g>
  );
}

CustomTick.propTypes = {
  payload: PropTypes.shape({
    value: PropTypes.string.isRequired,
  }).isRequired,
  x: PropTypes.number.isRequired,
  y: PropTypes.number.isRequired,
};

export default CustomTick;
