import React from "react";
import PropTypes from "prop-types";
import styled from "@emotion/styled";
import { keyframes } from "@emotion/core";
const flash = keyframes`
0% { opacity: 0; }
50% { opacity: 0.6; }
100% { opacity: 0; }
`;
const Wrapper = styled.span`
.mobile {
display: none;
}
@media (pointer: coarse) {
.mobile {
display: inline;
}
.desktop {
display: none;
}
}
`;
const G = styled.g`
position: relative;
opacity: 0.2;
animation: ${flash} 3s infinite ease-in-out;
`;
const ClickIcon = ({ size, color }) => (
<Wrapper>
<svg className="desktop" width={size} height={size} viewBox="0 0 1000 1000" fill="none">
<G>
<path
fill={color}
d="M391.5,174.2c10.2-6.8,22.3-13.7,36.3-20.7V19.2c0-2.4-0.9-4.5-2.7-6.4c-1.8-1.8-3.9-2.7-6.4-2.7h-18.1 c-2.4,0-4.5,0.9-6.4,2.7c-1.8,1.8-2.7,3.9-2.7,6.4L391.5,174.2z"
/>
<path
fill={color}
d="M329.8,228.2c8.2-9,16.8-17.5,25.8-25.8L221.3,68.5c-1.7-1.9-3.8-2.9-6.4-2.9c-2.5,0-4.7,1-6.4,2.9l-12.7,12.7 c-1.9,1.7-2.9,3.8-2.9,6.4c0,2.5,1,4.7,2.9,6.4L329.8,228.2z"
/>
<path
fill={color}
d="M280.8,300.4c7-13.8,13.9-25.9,20.7-36.3h-155c-2.4,0-4.5,0.9-6.4,2.7c-1.8,1.8-2.7,3.9-2.7,6.4v18.1 c0,2.4,0.9,4.5,2.7,6.4s3.9,2.7,6.4,2.7L280.8,300.4z"
/>
</G>
<path
fill={color}
opacity="0.3"
d="M608.6,989.9c34.4,0,67.2-6.7,98.5-20.1s58.4-31.5,81.1-54.3c22.7-22.7,40.8-49.8,54.3-81.1 c13.4-31.3,20.1-64.2,20.1-98.5V445.6c0-34.4-6.7-67.2-20.1-98.5S811,288.7,788.2,266c-22.7-22.7-49.8-40.8-81.1-54.3 c-31.3-13.4-64.2-20.1-98.5-20.1h-36.3c-34.4,0-67.2,6.7-98.5,20.1s-58.4,31.5-81.1,54.3c-22.7,22.7-40.8,49.8-54.3,81.1 c-13.4,31.3-20.1,64.2-20.1,98.5V736c0,34.4,6.7,67.2,20.1,98.5s31.5,58.4,54.3,81.1c22.7,22.7,49.8,40.8,81.1,54.3 c31.3,13.4,64.2,20.1,98.5,20.1H608.6z M599.5,518H363.6c-2.4,0-4.5-0.9-6.4-2.7c-1.8-1.8-2.7-3.9-2.7-6.4v-18.1 c0-2.4,0.9-4.5,2.7-6.4c1.8-1.8,3.9-2.7,6.4-2.7h208.7v-245c0-2.4,0.9-4.5,2.7-6.4c1.8-1.8,3.9-2.7,6.4-2.7h18.1 c2.4,0,4.5,0.9,6.4,2.7c1.8,1.8,2.7,3.9,2.7,6.4v272.2c0,2.4-0.9,4.5-2.7,6.4C604.1,517.1,601.9,518,599.5,518z"
/>
</svg>
<svg className="mobile" width={size - 15} height={size - 15} viewBox="0 0 1000 1000" fill="none">
<G>
<path
fill={color}
d="M273.5,75.1l15.7-15.7c4.3-4.3,11.4-4.3,15.7,0l54.1,54.1c4.3,4.3,4.3,11.4,0,15.7l-15.7,15.7c-4.3,4.3-11.4,4.3-15.7,0 l-54.1-54.1C269.2,86.5,269.2,79.4,273.5,75.1C273.5,75.1,273.5,75.1,273.5,75.1z"
/>
<path
fill={color}
d="M528.3,113.3l53.9-54c4.3-4.3,11.4-4.3,15.7,0l15.7,15.7c4.3,4.3,4.3,11.4,0,15.7l-53.9,54c-4.3,4.3-11.4,4.3-15.7,0 L528.3,129C523.9,124.7,523.9,117.7,528.3,113.3C528.3,113.3,528.3,113.3,528.3,113.3z"
/>
<path
fill={color}
d="M585.6,207.2h76.3c6.1,0,11.1,5,11.1,11.1v22.2c0,6.1-5,11.1-11.1,11.1h-76.3c-6.1,0-11.1-5-11.1-11.1v-22.2 C574.5,212.2,579.4,207.2,585.6,207.2z"
/>
<path
fill={color}
d="M225.2,207.2h76.4c6.1,0,11.1,5,11.1,11.1v22.2c0,6.1-5,11.1-11.1,11.1h-76.4c-6.1,0-11.1-5-11.1-11.1v-22.2 C214.1,212.2,219.1,207.2,225.2,207.2z"
/>
<path
fill={color}
d="M432.5,0h22.2c6.1,0,11.1,5,11.1,11.1v76.3c0,6.1-5,11.1-11.1,11.1h-22.2c-6.1,0-11.1-5-11.1-11.1V11.1 C421.4,5,426.3,0,432.5,0z"
/>
</G>
<path
fill={color}
opacity="0.3"
d="M211.7,653.1l116.7,170.7c21.7,31.4,50.4,57.4,83.8,76c13.1,7.6,21.1,21.6,20.9,36.7v37.4c0,14.5,11.7,26.2,26.2,26.2 c0,0,0,0,0,0h246c14.5,0,26.2-11.7,26.2-26.2v-70.9c0.3-23.9,8.4-47,23.2-65.7c27-34.4,41.8-76.9,42-120.7l0-139.4 c1.4-26.5-18.9-49.2-45.4-50.7c-1.2-0.1-2.5-0.1-3.7-0.1h-1.2c-24.6-1.7-45.9,16.7-47.9,41.3v-40.1c-1.8-24.5-23-42.9-47.5-41.3 l-1.4,0c-27.4,0-49.4,19.1-49.4,42.7l0-38.4c-1-23.5-19.6-42.4-43-44c-29.9-3.1-55.2,17-55.2,42.3l0-201.2 c0-32.2-26.2-58.3-58.4-58.3c-32.2,0-58.2,26.1-58.3,58.3V638l-85-53.3c-19.6-12.3-44-14-65.2-4.6 C204,594.7,194.5,627.9,211.7,653.1z"
/>
</svg>
</Wrapper>
);
ClickIcon.defaultProps = {
size: 100,
color: "#111111"
};
ClickIcon.propTypes = {
size: PropTypes.number,
color: PropTypes.string
};
export default ClickIcon;
