import * as React from 'react'
import {FC} from 'react'
import {CropMarks} from './CropMarks'

/**
 *
 * @internal
 */
export const BleedCrops: FC = ({children}) => {
  return (
    <>
      <style>{`
        html {
          --slug-area: 0px;
          --bleed: 11px;
        }
      `}</style>
      <div
        /* NOTE: `no-freeze` class EXCLUDES this element from the freezeStyles script that makes media queries work by inlining computed styles. This element is the parent of the needs to be excluded so that it can repond to the changed --slug-area size AFTER freezeStyles has run */
        className="no-freeze"
        style={{
          isolation: `isolate`,
          display: `grid`,
          height: `100vh`,
          width: `100vw`,
          gridTemplateRows: `var(--slug-area, 0) 1fr var(--slug-area, 0)`,
          gridTemplateColumns: `var(--slug-area, 0) 1fr var(--slug-area, 0)`,
          gridTemplateAreas: `
            " s–   s–  s– "
            " sl   📋  s▍ "
            " s▂   s▂  s▂ "
          `,
        }}
      >
        <div
          /* NOTE: while this element doesn't need to be excluded from freezeStyles, it also doesn't need to have it applied, so lets not */
          className="no-freeze"
          style={{
            gridArea: `📋`,
            overflow: `hidden`,
            margin: `calc(-1 * var(--bleed))`,
            position: `relative`,
            display: `flex`,
            flexDirection: `column`,
          }}
        >
          {children}
        </div>
      </div>

      <CropMarks />
    </>
  )
}

export default BleedCrops