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 GiftIcon = styled.svg`
  & .a {
    fill: none;
    stroke: ${Colors.mongeral};
    stroke-miterlimit: 10;
    stroke-width: 3px;
  }
`;

export default React.memo(({ width, height }: IProps) => (
  <GiftIcon viewBox='0 0 44 44' width={width || Sizes.s5} height={height || Sizes.s5}>
    <path className='a' d='M22.003 11.131V42.5M5.134 20.786h33.732V42.5H5.134zM26.75 11.154h4.827a4.827 4.827 0 1 0 0-9.653H26.75a4.827 4.827 0 1 0 0 9.653z' />
    <path className='a' d='M17.19 1.501h-4.827a4.827 4.827 0 1 0 0 9.653h4.827a4.827 4.827 0 1 0 0-9.653z' />
    <path className='a' d='M1.5 11.145h41v9.657h-41z' />
  </GiftIcon>
));