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 Close = ({ callback }: Props) => {
  return (
    <Button aria-label="Close" data-test="component-hamburger" className="nwc--hamburger nwc--close-button" onClick={() => callback()}>
      <Bar1 aria-hidden="true" />
      <Bar2 aria-hidden="true" />
    </Button>
  );
};

export default Close;

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

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

const Bar = styled.div`
  width: 100%;
  height: 2px;
  background: ${v.colors.dark};
`;

const Bar1 = styled(Bar as any)`
  transform: rotate(-45deg) translate(0px, 0px);
`;

const Bar2 = styled(Bar as any)`
  transform: rotate(45deg) translate(-1px, -2px);
`;