"use client"

import type { Column } from "@tanstack/react-table"
import {
  ArrowDownIcon,
  ArrowUpDownIcon,
  ArrowUpIcon,
} from "lucide-react"
import { useTranslations } from "next-intl"

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

type DataTableColumnHeaderProps<TData, TValue> = {
  column: Column<TData, TValue>
  title: string
  className?: string
}

function DataTableColumnHeader<TData, TValue>({
  column,
  title,
  className,
}: DataTableColumnHeaderProps<TData, TValue>) {
  const tc = useTranslations("Common")

  if (!column.getCanSort()) {
    return <div className={cn(className)}>{title}</div>
  }

  const sorted = column.getIsSorted()
  const sortLabel =
    sorted === "asc"
      ? tc("table.sortAsc", { column: title })
      : sorted === "desc"
        ? tc("table.sortDesc", { column: title })
        : tc("table.sortNone", { column: title })

  return (
    <Button
      type="button"
      variant="ghost"
      size="sm"
      className={cn("-ml-3 h-8 gap-1.5 font-medium", className)}
      onClick={() => column.toggleSorting(sorted === "asc")}
      aria-label={sortLabel}
    >
      <span>{title}</span>
      {sorted === "desc" ? (
        <ArrowDownIcon className="size-4" aria-hidden />
      ) : sorted === "asc" ? (
        <ArrowUpIcon className="size-4" aria-hidden />
      ) : (
        <ArrowUpDownIcon className="size-4 text-muted-foreground" aria-hidden />
      )}
    </Button>
  )
}

export { DataTableColumnHeader }