"use client"

import { ColumnDef } from "@tanstack/react-table"
import { PublisherTemplate } from "@/types/publisher"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button";
import { Eye } from "lucide-react";
import Link from 'next/link'

export const publisherTemplateColumns: ColumnDef<PublisherTemplate>[] = [
  {
    accessorKey: "id",
    header: "SL#",
    cell: ({ row }) => {
      // row.index is 0-based, so we add 1
      return <span>{row.index + 1}</span>;
    },
  },
  {
    id: "actions",
    header: "Preview",
    cell: ({ row }) => (
      <Link href={`/preview/${row.original.pivot?.ad_id}/${row.original.pivot?.publisher_template_id}`} target="_blank">
        <Button variant={'outline'} size="sm" >
          <Eye className="mr-2 h-4 w-4" /> Preview
        </Button>
      </Link>
    ),
  },
  {
    accessorKey: "pivot.placeholder",
    header: "Placeholder",
    cell: ({ row }) => row.original.pivot?.placeholder || "N/A",
  },

  {
    accessorKey: "pivot.size",
    header: "Size",
    cell: ({ row }) => row.original.pivot?.size || "",
  },


  {
    accessorKey: "company_name",
    header: "Company",
  },
  {
    accessorKey: "name",
    header: "Template Name",
  },
  {
    accessorKey: "domain",
    header: "Domain",
  },
  // {
  //   accessorKey: "placeholders",
  //   header: "Ads Count",
  //   cell: ({ row }) => {
  //     const count = row.original.placeholders.sebpo_ads.length
  //     return <Badge variant="outline">{count} Slots</Badge>
  //   },
  // },
  {
    accessorKey: "status",
    header: "Status",
    cell: ({ row }) => {
      const status = row.getValue("status") as string
      return (
        <Badge className={status === "active" ? "bg-green-500" : "bg-gray-500"}>
          {status}
        </Badge>
      )
    },
  },



]