import React from 'react';
import styled from 'styled-components';

import v from '../../styles/Variables';

interface Props {
  /**
   * Function that runs after being clicked
   */
  callback: () => void;
}

const Hamburger = ({ callback }: Props) => {
  return (
    <Button aria-label="Close" data-test="component-hamburger" className="nwc--hamburger" onClick={() => callback()}>
      <Bar aria-hidden="true" />
      <Bar aria-hidden="true" />
      <Bar aria-hidden="true" />
    </Button>
  );
};

export default Hamburger;

/* styles */
const Button = styled.button`
  height: 45px;
  width: 45px;
  border: none;
  border-radius: 0;
  background: transparent;
  transition: ${v.animate};

  &:hover div {
    background: ${v.colors.dark};
  }
`;

const Bar = styled.div`
  width: 100%;
  height: 2px;
  background: ${v.colors.dark666};
  margin-bottom: 8px;

  &:last-child {
    margin: 0;
  }
`;