"use client";

import { ColumnDef } from "@tanstack/react-table";
import { Ad } from "@/types/campaign";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Eye } from "lucide-react";


export const columns = (onViewDetails: (ad: Ad) => void, handleEditDetails: (ad: Ad) => void): ColumnDef<Ad>[] => [
  {
    accessorKey: "id",
    header: "SL#",
    cell: ({ row }) => {
      // row.index is 0-based, so we add 1
      return <span>{row.index + 1}</span>;
    },
  },
  {
    accessorKey: "title",
    header: "Ad Title",
  },
  
  {
    accessorKey: "size",
    header: "Size",
  },

  {
    accessorKey: "type",
    header: "Type",
    cell: ({ row }) => <Badge variant="outline" className="capitalize">{row.original.type}</Badge>,
  },

  {
    accessorKey: "publisher_templates",
    header: "Publisher",
    cell: ({ row }) => <Badge variant="outline" className="capitalize">{row.original?.publisher_templates?.length || 0}</Badge>,
  },

  {
    accessorKey: "status",
    header: "Status",
    cell: ({ row }) => (
      <Badge className={row.original.status === "active" ? "bg-green-500" : "bg-red-500"}>
        {row.original.status}
      </Badge>
    ),
  },
  {
    id: "actions",
    cell: ({ row }) => (
      <div className="flex gap-2">
      <Button variant={'outline'} size="sm" onClick={() => onViewDetails(row.original)}>
        <Eye className="mr-2 h-4 w-4" /> View
      </Button>
      
        <Button variant={'outline'} size="sm" onClick={() => handleEditDetails(row.original)}>
        <Eye className="mr-2 h-4 w-4" /> Edit
      </Button>

      </div>
    ),
  },
];