"use client"

import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react"

import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"

export type XmlApiSortDir = "asc" | "desc"

type XmlApiSortableHeaderProps = {
  label: string
  active?: boolean
  direction?: XmlApiSortDir
  onClick: () => void
  disabled?: boolean
  className?: string
}

export function XmlApiSortableHeader({
  label,
  active,
  direction,
  onClick,
  disabled,
  className,
}: XmlApiSortableHeaderProps) {
  const SortIcon = !active ? ArrowUpDown : direction === "asc" ? ArrowUp : ArrowDown

  return (
    <Button
      type="button"
      variant="ghost"
      size="sm"
      className={cn("-ml-2 h-8 px-2 font-medium", className)}
      onClick={onClick}
      disabled={disabled}
    >
      {label}
      <SortIcon
        className={cn("size-3.5", active ? "text-foreground" : "text-muted-foreground")}
      />
    </Button>
  )
}