/**
 * Copyright 2018-present Facebook.
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 * @format
 */

import {Glyph, styled, colors} from 'flipper';

type Props = {|
  title: string,
  icon: string,
  active: boolean,
  onClick: () => void,
|};

const ToolbarIcon = styled('div')({
  marginRight: 9,
  marginTop: -3,
  marginLeft: 4,
  position: 'relative', // for settings popover positioning
});

export default function(props: Props) {
  return (
    <ToolbarIcon onClick={props.onClick} title={props.title}>
      <Glyph
        name={props.icon}
        size={16}
        color={
          props.active
            ? colors.macOSTitleBarIconSelected
            : colors.macOSTitleBarIconActive
        }
      />
    </ToolbarIcon>
  );
}