import React from 'react'

import Button from '../Button/Button'
import Icon from '../Icons/Icon'
import { type IconProps } from '../Icons/Icon.models'

export type DragHandleProps = Omit<IconProps, 'icon' | 'className'> & {
  /** Optional prop to add a test id to the DragHandle for QA testing */
  qaTestId?: string
}

const DragHandle = ({
  iconSize,
  qaTestId = 'drag-handle-button',
}: DragHandleProps) => {
  return (
    <Button as='unstyled' qaTestId={qaTestId}>
      {/* If this class is changed, then changes in DraggableList.tsx must be made to match this. */}
      <Icon
        icon='dragHandle'
        className='drag-handle'
        iconSize={iconSize}
        color='purple'
      />
    </Button>
  )
}

export default DragHandle