import { useLocation } from 'react-router-dom'

import PrefetchLink from '@/components/PrefetchLink'

import type { ReactNode } from 'react'


export default <T extends string,>({ by, label, currentOrder, defaultDirection }: {
    by:               T
    label:            ReactNode
    currentOrder:     `${ T }:${ 'asc' | 'desc' }`
    defaultDirection: Record<T, 'asc' | 'desc'> }) => {
  const [fld, dir] = currentOrder.split (':')

  const location = useLocation ()
  const qs = new URLSearchParams (location.search)
  const nextDir =
      (by === fld)
      ? (dir === 'asc' ? 'desc' : 'asc')
      : (defaultDirection[by] || 'desc')
  qs.set ('order', `${ by }:${ nextDir }`)
  qs.set ('page', '1')

  return (
      <PrefetchLink
	  className="text-inherit visited:text-inherit hover:text-inherit"
	  to={`${ location.pathname }?${ qs.toString () }`}>
	<span className="inline-flex w-max items-baseline gap-1 whitespace-nowrap font-bold">
	  {label}
	  {by === fld && <span className="shrink-0">{dir === 'asc' ? '▲' : '▼'}</span>}
	</span>
      </PrefetchLink>)
}