"use client";
import { ColumnDef } from "@tanstack/react-table";
import { ArrowUpDown } from "lucide-react";
import { Button } from "@/components/ui/button";
import Link from "next/link";

export const columns: ColumnDef<CategoryType>[] = [
  {
    accessorKey: "serial",
    header: "#ID",
    cell: ({ row }) => <p>{row.index + 1}</p>,
  },
  {
    accessorKey: "name",
    header: "name",
    cell: ({ row }) => (

      <Link
        href={`/admin/categories/${row?.original?.uuid}`}
        className="text-primary"
      >
        <p>{row?.original?.name}</p>
      </Link>
    ),
  },
  {
    accessorKey: "Sub_categories count",
    header: "Sub_categories count",
    cell: ({ row }) => (
      <p>
        {row?.original?.children?.length > 0
          ? row?.original?.children.length
          : "0"}
      </p>
    ),
  },
  {
    accessorKey: "Sub_sub_categories count",
    header: "Sub_sub_categories count",
    cell: ({ row }) => {
      const subSubCategoryCount = row?.original?.children
        .map((child) => child?.children?.length)
        .reduce((acc, count) => acc + count, 0);

      return <p>{subSubCategoryCount}</p>;
    },
  },
  {
    accessorKey: "products",
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
          className="text-left text-black/80 p-0"
        >
          <ArrowUpDown className="ml-2 h-4 w-4 pr-1" />
          Products
        </Button>
      );
    },
    cell: ({ row }) => (
      <p className="ml-10">
        {/* {row?.original?.products ?? row?.original?.products} */}
      </p>
    ),
  },
];