//spell-checker: words noninteractive
import React from 'react'

import { useGridContext, useGridSelector } from '../context/grid-context/hook'

export type GridHeaderGroupCellSpacerProps = {
    columnId: string
}

export const GridHeaderGroupCellSpacer = ({
    columnId,
}: GridHeaderGroupCellSpacerProps) => {
    const { selectors } = useGridContext()

    const { actualWidth } = useGridSelector((state) =>
        selectors.selectColumn(state, columnId)
    )

    // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
    return <th style={{ width: actualWidth }} role="none" />
}

export const GridHeaderGroupCellSpacerMemo = React.memo(
    GridHeaderGroupCellSpacer
) as typeof GridHeaderGroupCellSpacer