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

import Colors from '../Colors';
import Sizes from '../Sizes';

export interface IProps {
  width?: number;
  height?: number;
}

const CloseIcon = styled.svg`
  .close {
    fill: none;
    stroke: ${Colors.lochmara};
    stroke-miterlimit: ${Sizes.s2};
    stroke-width: 2px;
  }

  .close {
    transition: stroke 0.15s ease-in-out;
  }
  
  .close.one {
    transition: transform 0.15s ease-in-out;
    transform-origin: center;
  }
  
  .close.two {
    transition: transform 0.15s 0.1s ease-in-out;
    transform-origin: center;
  }
  
  .close.square {
    transform: scale(0);
    transition: transform 0.15s 0.1s ease-in-out;
    transform-origin: center;
  }

  &:hover .close {
    stroke: #003C64;
  }

  &:hover .close.one {
    transform: scale(0.2);
  }

  &:hover .close.two {
    transform: scale(0.2)
  }
  
  &:hover .close.square {
    transform: scale(0.8);
    fill: #003C64;
  }
`;

export default React.memo(({ width, height }: IProps) => (
  <CloseIcon viewBox='0 0 22 20.4' width={width || Sizes.s5} height={height || Sizes.s5}>
    <line className="close two" x1="3" y1="18.2" x2="19" y2="2.2"/>
    <line className="close one" x1="19" y1="18.2" x2="3" y2="2.2"/>
    <rect className="close square" x="8" y="7.2" width="6" height="6"/>
  </CloseIcon>
));