import clsx from 'clsx'

import { TbChevronDown, TbChevronUp } from 'react-icons/tb'

import { SortType } from '@/types'

type SortIconProps = {
	state: SortType
}

function SortIcon({ state }: SortIconProps) {
	return (
		<>
			<span
				className={clsx('-mb-0.5', {
					'dark:text-dark-gray-300 text-gray-800': state === 'asc'
				})}
			>
				<TbChevronUp size={18} />
			</span>
			<span
				className={clsx('-mt-0.5', {
					'dark:text-dark-gray-300 text-gray-800': state === 'desc'
				})}
			>
				<TbChevronDown size={18} />
			</span>
		</>
	)
}

export { SortIcon }
