import React from 'react';

import styles from './border-svg.scss';

export const BorderSvg = React.memo(
  (): React.ReactElement => (
    <svg
      width="0"
      height="0"
      className={styles['border-svg']}
    >
      <defs>
        <clipPath
          id="borderSvgPath"
          clipPathUnits="objectBoundingBox"
        >
          <path d="M 0.0457 0.0086 L 0.0457 0 L 0.9571 0 Q 1 0 1 0.1714 L 1 0.8286 Q 1 1 0.9571 1 L 0.0457 1 Q 0 1 0 0.8286 L 0 0.1714 Q 0 0 0.0457 0 L 0.0457 0.0086 Q 0.0029 0.0029 0.0029 0.1714 L 0.0029 0.8286 Q 0.0029 0.9971 0.0457 0.9914 L 0.9571 0.9914 Q 0.9971 0.9971 0.9971 0.8286 L 0.9971 0.1714 Q 0.9971 0.0029 0.9571 0.0086 L 0.0457 0.0086 L 0.0457 0 L 0.0457 0.0086 z" />
        </clipPath>
      </defs>
    </svg>
  ),
);

BorderSvg.displayName = 'BorderSvg';