"use client"
import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
import { StoryWithGenres } from "./page"
import { ArrowUpDown, MoreHorizontal } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"



const columnHelper = createColumnHelper<StoryWithGenres>()

export const columns: ColumnDef<StoryWithGenres>[] = [
  {
    accessorKey: "title",
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          Title
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      )
    },

  },
  {
    accessorKey: "word_count",
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          Word Count
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      )
    },
    enableColumnFilter: false
  },
  // {
  //   accessorFn: row => {
  //     let unpacked = ""
  //     for (let i = 0; i < row.genres.length; i++) {
  //       unpacked = unpacked + " " + row.genres[i].name
  //     }
  //     return unpacked
  //   },
  //   header: "Genres"
  //
  //
  // },
  columnHelper.accessor("genres", {
    cell: props => {
      const genres = props.getValue()
        .map(e => <Badge>{e.name}</Badge>)
      return genres
    }
  })
  // {
  //   accessorKey: "deleted",
  //   header: "Deleted"
  // },

]