import type { Column } from "react-data-grid"
import type { Fields } from "../../../types"
import { CgInfo } from "react-icons/cg"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

export const generateColumns = <T extends string>(fields: Fields<T>) =>
  fields.map(
    (column): Column<any> => ({
      key: column.key,
      name: column.label,
      minWidth: 150,
      headerRenderer: () => (
        <div className="flex items-center gap-1 relative">
          <div className="flex-1 overflow-hidden text-ellipsis">
            {column.label}
          </div>
          {column.description && (
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <div className="flex-none">
                    <CgInfo className="h-4 w-4" />
                  </div>
                </TooltipTrigger>
                <TooltipContent>
                  {column.description}
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
          )}
        </div>
      ),
      formatter: ({ row }) => (
        <div className="min-w-full min-h-full overflow-hidden text-ellipsis">
          {row[column.key]}
        </div>
      ),
    }),
  )
