import React, { Component } from 'react';
import PropTypes from 'prop-types';
import './HomeTile.scss';

export class EllipsisIcon extends Component {
	static propTypes = {
		/** Custom class name(s) */
		className: PropTypes.string,
		/** An array of all of the tiles, if there are no assets it defaults to empty */
		onMenu: PropTypes.func
	};

	render() {
		const { className, onMenu } = this.props;

		return (
			<svg tabIndex="0" className={className} onClick={ onMenu } onKeyUp={ onMenu } xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 24 24" style={{ 'enable-background': 'new 0 0 24 24' }} xmlSpace="preserve">
				<g className="dot-first">
					<circle className="more-icon-dot" cx="20" cy="4" r="2"/>
				</g>
				<g className="dot-second">
					<circle className="more-icon-dot" cx="20" cy="12" r="2"/>
				</g>
				<g className="dot-third">
					<circle className="more-icon-dot" cx="20" cy="20" r="2"/>
				</g>
			</svg>
		);
	}
}