import { Box } from '@wix/design-system';
import { DragHandle } from '@wix/wix-style-react-incubator/drag-and-drop';
import React from 'react';
import { NestedTableDataItem } from '../../state/NestedTableState/NestedTableNodeState';
import { FiltersMap } from '@wix/bex-core';

export interface NestedTableDragHandleProps<
  C extends string,
  T,
  F extends FiltersMap,
> {
  item: NestedTableDataItem<C, T, F>;
}

export function NestedTableDragHandle<
  C extends string,
  T,
  F extends FiltersMap,
>(props: NestedTableDragHandleProps<C, T, F>) {
  const { item } = props;
  const { originalKeyedItem } = item;
  return (
    <Box
      direction="vertical"
      paddingInlineStart="6px"
      paddingInlineEnd="6px"
      dataHook="drag-handle"
    >
      <DragHandle id={originalKeyedItem.key} />
    </Box>
  );
}