"use client";
import { useEffect, useState } from "react";
import { TableColumn } from "react-data-table-component";
import { FaEdit, FaTrash } from "react-icons/fa";
import { AiOutlineCheck, AiOutlineClose } from "react-icons/ai";
import CustomDataTable from "@/src/components/admin/tables/customTableComponent";
 
import { useTableActions } from "@/src/hooks/admin/useTableAction";
import StatusBadge from "@/src/components/admin/StatusBadge";
import ActionGroup from "@/src/components/admin/ui/button/ActionGroup";
import ActionButton from "@/src/components/admin/ui/button/ActionButton";
import { useStateContext } from "@/src/context/admin/StateContext";

export default function SectionList() {

  const [filteredUrl, setFilteredUrl] = useState("/sections/ajax/list");
  const { refresh } = useStateContext();

  const { toggleStatus, editItem, deleteItemAction } =
    useTableActions("sections");

  const columns: TableColumn<any>[] = [
    { name: "Sr. No.", selector: (row) => row.serial, width: "80px" },
    {
      name: "Sections",
      selector: (row) => (row.name?.toLowerCase() === "unknown" ? "-" : row.name),
    },
    {
      name: "Slug",
      selector: (row) => (row.slug),
    },
    {
      name: "URL",
      selector: (row) => (row.path),
    },
    {
      name: "Module Name",
      selector: (row) => (row.module),
    },
    {
      name: "Display Order",
      selector: (row) => (row.display_order),
    },
    {
      name: "Actions",
      cell: (row) => (
        <ActionGroup>
          <ActionButton
            variant="edit"
            onClick={() => editItem(row.id)}
            title="Edit"
          >
            <FaEdit size={15} />
          </ActionButton>
          <ActionButton
            variant="delete"
            onClick={() => deleteItemAction(row.id)}
            title="Delete"
          >
            <FaTrash size={15} />
          </ActionButton>

        </ActionGroup>
      ),
      width: "200px",
      ignoreRowClick: true,

    },
  ];

  return (

    <div className="table-container max-w-screen">
      <CustomDataTable
        tableName="Section Master"
        url={filteredUrl}
        columns={columns}
        refresh={refresh}
        search={true}
      />
    </div>


  );
};