/** @jsxImportSource @emotion/react */
import 'twin.macro';

import React, { FunctionComponent, SVGProps } from 'react';

type Props = SVGProps<SVGSVGElement> & {
  isOpen: boolean;
};

const MenuIcon: FunctionComponent<Props> = ({ isOpen, ...restProps }) => {
  return (
    <svg
      viewBox="-12 -12 24 24"
      fill="none"
      tw="w-4 h-4"
      strokeWidth={2}
      strokeLinecap="square"
      {...restProps}
    >
      <path
        d="M-11 0h22"
        stroke="currentColor"
        tw="transition-transform duration-200"
        transform={isOpen ? 'rotate(45) rotate(180)' : 'translate(0 -6)'}
      />
      <path
        d="M-11 0h22"
        stroke="currentColor"
        opacity={isOpen ? 0 : void 0}
        tw="transition-opacity duration-200"
      />
      <path
        d="M-11 0h22"
        stroke="currentColor"
        tw="transition-transform duration-200"
        transform={isOpen ? 'rotate(-45) rotate(-180)' : 'translate(0 6)'}
      />
    </svg>
  );
};

export default MenuIcon;