import styled from '@emotion/styled';
import { SVGProps } from 'react';

export const ProtectedIcon: React.FC<SVGProps<any>> = () => (
  <Wrapper>
    <svg
      width="22"
      height="29"
      viewBox="0 0 22 29"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M2.99998 28.333C2.26665 28.333 1.63909 28.0721 1.11731 27.5503C0.595535 27.0286 0.334202 26.4006 0.333313 25.6663V12.333C0.333313 11.5997 0.594646 10.9721 1.11731 10.4503C1.63998 9.92857 2.26754 9.66723 2.99998 9.66634H4.33331V6.99968C4.33331 5.15523 4.98354 3.58323 6.28398 2.28368C7.58442 0.98412 9.15642 0.333898 11 0.333009C12.8435 0.33212 14.416 0.982342 15.7173 2.28368C17.0186 3.58501 17.6684 5.15701 17.6666 6.99968V9.66634H19C19.7333 9.66634 20.3613 9.92768 20.884 10.4503C21.4066 10.973 21.6675 11.6006 21.6666 12.333V25.6663C21.6666 26.3997 21.4058 27.0277 20.884 27.5503C20.3622 28.073 19.7342 28.3339 19 28.333H2.99998ZM11 21.6663C11.7333 21.6663 12.3613 21.4055 12.884 20.8837C13.4066 20.3619 13.6675 19.7339 13.6666 18.9997C13.6658 18.2655 13.4049 17.6379 12.884 17.117C12.3631 16.5961 11.7351 16.3348 11 16.333C10.2649 16.3312 9.63731 16.5926 9.11731 17.117C8.59731 17.6415 8.33598 18.269 8.33331 18.9997C8.33065 19.7303 8.59198 20.3583 9.11731 20.8837C9.64265 21.409 10.2702 21.6699 11 21.6663ZM6.99998 9.66634H15V6.99968C15 5.88856 14.6111 4.94412 13.8333 4.16634C13.0555 3.38856 12.1111 2.99968 11 2.99968C9.88887 2.99968 8.94442 3.38856 8.16665 4.16634C7.38887 4.94412 6.99998 5.88856 6.99998 6.99968V9.66634Z"
        fill="black"
      />
    </svg>
  </Wrapper>
);

const Wrapper = styled.div`
  padding: 16px;
`;