import React from 'react'
import { cursor, sizePx } from '@planview/pv-utilities'
import styled from 'styled-components'

const ExtraSpace = styled.div`
    width: ${sizePx.smallCompact};
    flex: 0 0 auto;
    ${cursor.grab};
    height: 100%;
`

export type GridCellGrabberProps = {
    tabIndex: number
}

export const GridCellGrabber = ({ tabIndex }: GridCellGrabberProps) => (
    <ExtraSpace data-grid-row-drag-handle="true" tabIndex={tabIndex} />
)