import { FilterIcon } from 'lucide-react'
import { DateFilter, FilterValue, NumberFilter } from '@types'

export const TableFilterHeaderIcon = ({ filterValue }: { filterValue: FilterValue }) => {
  let isActive = false

  if (filterValue !== null && filterValue !== undefined) {
    if (Array.isArray(filterValue)) {
      isActive = filterValue.length > 0
    } else if (typeof filterValue === 'object') {
      const obj = filterValue as NumberFilter | DateFilter
      isActive =
        (Array.isArray(obj.values) && obj.values.length > 0) ||
        ('min' in obj && obj.min !== null) ||
        ('max' in obj && obj.max !== null) ||
        ('start' in obj && !!obj.start) ||
        ('end' in obj && !!obj.end)
    }
  }

  if (!isActive) {
    return null
  }

  return (
    <div className="absolute top-1/2 translate-y-[calc(-50%-2.5px)] right-[13.5px] flex items-center justify-center p-0 size-5.5 rounded-full pointer-events-none">
      <FilterIcon className="size-4 text-muted-foreground/60" />
    </div>
  )
}
