import React, { HTMLAttributes } from 'react'
import { useCanvasStore } from '../../state/canvasStore'

interface GridOverlayProps extends HTMLAttributes<HTMLDivElement> {}

export const GridOverlay: React.FC<GridOverlayProps> = ({ ...props }) => {
  useCanvasStore()

  const style: React.CSSProperties = {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    pointerEvents: 'none',
    backgroundSize: '34px 34px, 170px 170px',
    backgroundPosition: '0 0, 0 0',
    backgroundImage: `
      linear-gradient(to right, rgba(125,145,175,.04) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(125,145,175,.04) 1px, transparent 1px),
      linear-gradient(to right, rgba(125,145,175,.075) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(125,145,175,.075) 1px, transparent 1px)
    `,
  }

  return <div style={style} {...props} />
}