// @flow
import React from 'react';
import styled from 'styled-components';
import ApoliticalBrand from '../../../Theme/ApoliticalBrand';
import RotatingChevron from '../../Molecule/RotatingChevron/RotatingChevron';

type Props = {
  onClick?: () => void,
  dataGtmEventType: string,
  dataGtmEventContext: string,
  className?: string,
}

const NavLink = styled.a`
  text-decoration: none;

  span {
    :before,
    :after {
      background-color: ${ApoliticalBrand.color.purple}
    }
  }
`;

/**
 * A chevron that can be used for drop downs and menus
 * ToDo: Chevron shouldn't be responsible for whether it gets displayed or not
 */
const Chevron = ({
  className,
  onClick,
  dataGtmEventType,
  dataGtmEventContext,
}: Props) => (
  <NavLink
    className={className}
    onClick={onClick}
    data-gtm-event-type={dataGtmEventType}
    data-gtm-event-context={dataGtmEventContext}
  >
    <RotatingChevron />
  </NavLink>
);

Chevron.defaultProps = {
  onClick() {},
  className: '',
};

export default Chevron;