// @flow
import React, { useContext } from 'react';
import { ThemeContext } from 'styled-components';
import { getPaletteColor } from '../../../../mixins/branding';
import type { RevealTextProps } from '../reveal-text.proptypes';

export const RevealTextHide = ({
  colorName = 'greyscale-dark',
}: RevealTextProps) => {
  const theme = useContext(ThemeContext);

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      fill="none"
      viewBox="0 0 24 24"
    >
      <g
        stroke={getPaletteColor(colorName)({ theme })}
        strokeLinecap="round"
        strokeWidth="2"
      >
        <path d="M1.605 8C3.68 11.587 7.558 14 12 14c4.442 0 8.32-2.413 10.395-6M9.035 14L8 17.864M3.828 11L1 13.828M15 14l1.035 3.864M20.207 11l2.828 2.828"></path>
      </g>
      <defs>
        <clipPath>
          <path fill="#fff" d="M0 0H24V24H0z"></path>
        </clipPath>
      </defs>
    </svg>
  );
};

RevealTextHide.displayName = 'RevealTextHide';
