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

const DropdownTrigram = (props) => {
    return(
        <span 
            className={cx(['DropdownTrigram', props.modifier])}
        >
            <svg
                aria-label="DropdownTrigram-openTitle"
                className={cx(['DropdownTrigram-open'])}
                fill="currentColor" 
                focusable="false"
                xmlns="http://www.w3.org/2000/svg" 
                width="22" height="18" viewBox="0 0 22 18" 
            >
                <title id="DropdownTrigram-openTitle">Open Menu</title>
                <path d="M0 0h22v4H0zM0 7h22v4H0zM0 14h22v4H0z"></path>
            </svg>
            <svg 
                aria-label="DropdownTrigram-closeTitle"
                className={cx(['DropdownTrigram-close'])}
                fill="currentColor" 
                focusable="false"
                xmlns="http://www.w3.org/2000/svg"
                width="22" height="18" viewBox="0 0 22 18"
            >
                <title id="DropdownTrigram-closeTitle">Close Menu</title>
                <path d="M20 7h-7V0H9v7H2v4h7v7h4v-7h7z"/>
            </svg>
        </span>
    );
};

DropdownTrigram.propTypes = {
    modifier: PropTypes.string
};

export default DropdownTrigram;