"use client";
import { IconEdit } from "@pawpal/icons"; // Ensure this icon exists or choose another
import { {{ApiResponseType}} } from "@pawpal/shared"; // e.g. AdminProductTagResponse
import { DataTable, DataTableProps } from "@pawpal/ui/core";
import { useFormatter, useTranslations } from "next-intl";
import TableAction from "../action";
import { BaseDatatableProps } from "../datatable";

interface Props extends BaseDatatableProps<{{ApiResponseType}}> {}

const {{EntityName}}Datatable = ({
  records,
  totalRecords,
  limit,
  page,
  setPage,
  fetching,
  sortStatus,
  setSortStatus,
  above,
}: Props) => {
  const format = useFormatter();
  const __ = useTranslations("Datatable.{{TranslationKey}}"); // e.g. "productTag"

  const columns: DataTableProps<{{ApiResponseType}}>["columns"] = [
    // Example Column: Name
    {
      accessor: "name", // Change to match your API response field
      noWrap: true,
      sortable: true,
      title: __("name"),
    },
    // Example Column: Created At (Hidden on small screens)
    {
      accessor: "createdAt",
      noWrap: true,
      sortable: true,
      title: __("createdAt"),
      render: (value) => format.dateTime(new Date(value.createdAt), "date"),
      visibleMediaQuery: above.md,
    },
    // Actions Column
    {
      accessor: "actions",
      title: "Actions",
      width: 100,
      textAlign: "center",
      render: (record) => (
        <TableAction
          displayType="icon"
          actions={[
            {
              color: "blue",
              icon: IconEdit,
              action: `/{{RouteBase}}/${record.id}`, // e.g. /products/tags/${record.id}
            },
          ]}
        />
      ),
    },
  ];

  return (
    <DataTable
      withTableBorder
      borderRadius="sm"
      striped
      highlightOnHover
      height="83.4dvh"
      minHeight={400}
      maxHeight={1000}
      idAccessor="id" // CHECK: Does your entity use 'id', 'slug', or 'uuid'?
      columns={columns}
      records={records}
      totalRecords={totalRecords}
      recordsPerPage={limit}
      page={page}
      onPageChange={setPage}
      fetching={fetching}
      sortStatus={sortStatus}
      onSortStatusChange={setSortStatus}
    />
  );
};

export default {{EntityName}}Datatable;