import Box from '../box'
import { vui } from '../core'
import { Icon } from '../icon'
import { cs } from '../utils'
import type { TableSortIconProps } from './table.types'

/** Displays a sort icon with given direction based on sort order. */
export const TableSortIcon = vui<'svg', TableSortIconProps>((props, ref) => {
  const { className, order } = props
  const activeColor = 'seaBlue.main'
  const inactiveColor = 'sandstone.85'

  const icons = [
    {
      color: order === 'asc' ? activeColor : inactiveColor,
    },
    {
      color: order === 'desc' ? activeColor : inactiveColor,
    },
  ]

  return (
    <Box ref={ref} column alignItems="center" justifyItems="center" ml="8px">
      <Icon
        className={cs('vui-tableSortIcon--top', className)}
        name={'uiCaretUp'}
        color={icons[0].color}
        size="xs"
        mb="-4px"
      />
      <Icon
        className={cs('vui-tableSortIcon--bottom', className)}
        name={'uiCaretDown'}
        color={icons[1].color}
        size="xs"
        mt="-4px"
      />
    </Box>
  )
})

TableSortIcon.displayName = 'TableSortIcon'

export default TableSortIcon
