import React from 'react';
import PropTypes from 'prop-types';

const MissingSVG = ({ scale, x, y }) => (
  <svg
    width="9"
    height="10"
    viewBox="0 0 9 10"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    x={scale.x(x) - 4.5}
    y={scale.y(y) - 5}
    style={{ pointerEvents: 'none' }}
  >
    <path
      d="M0.125 3.76562V1.34375C0.125 1.08984 0.320312 0.875 0.59375 0.875H3.01562C3.13281 0.875 3.25 0.992188 3.25 1.10938V1.89062C3.25 2.02734 3.13281 2.125 3.01562 2.125H1.375V3.76562C1.375 3.90234 1.25781 4 1.14062 4H0.359375C0.222656 4 0.125 3.90234 0.125 3.76562ZM5.75 1.10938C5.75 0.992188 5.84766 0.875 5.98438 0.875H8.40625C8.66016 0.875 8.875 1.08984 8.875 1.34375V3.76562C8.875 3.90234 8.75781 4 8.64062 4H7.85938C7.72266 4 7.625 3.90234 7.625 3.76562V2.125H5.98438C5.84766 2.125 5.75 2.02734 5.75 1.89062V1.10938ZM8.64062 6.5C8.75781 6.5 8.875 6.61719 8.875 6.73438V9.15625C8.875 9.42969 8.66016 9.625 8.40625 9.625H5.98438C5.84766 9.625 5.75 9.52734 5.75 9.39062V8.60938C5.75 8.49219 5.84766 8.375 5.98438 8.375H7.625V6.73438C7.625 6.61719 7.72266 6.5 7.85938 6.5H8.64062ZM3.25 9.39062C3.25 9.52734 3.13281 9.625 3.01562 9.625H0.59375C0.320312 9.625 0.125 9.42969 0.125 9.15625V6.73438C0.125 6.61719 0.222656 6.5 0.359375 6.5H1.14062C1.25781 6.5 1.375 6.61719 1.375 6.73438V8.375H3.01562C3.13281 8.375 3.25 8.49219 3.25 8.60938V9.39062Z"
      fill="white"
    />
  </svg>
);

MissingSVG.propTypes = {
  scale: PropTypes.shape({
    x: PropTypes.func,
    y: PropTypes.func,
  }),
  x: PropTypes.number,
  y: PropTypes.number,
};

export default MissingSVG;