import { MRT_ColumnDef } from "material-react-table";
import Link from "next/link";

const tableColumnStyle = {
  sx: {
    color: "#3180F3",
    background: "#e0ecfe",
    width: "auto",
    fontSize: "12px",
  },
};

export const customersData: MRT_ColumnDef<any>[] = [
  {
    accessorKey: "Edit",
    header: "Edit",
    muiTableHeadCellProps: tableColumnStyle,
    enableColumnFilter: false,
    enableSorting: false,
    Cell: ({ row }: { row: any }) => {
      return (
        <Link
          className="customers-edit-btn"
          href="/customers/[id]"
          as={"/customers/" + row?.original?.user_id}
        >
          Edit
        </Link>
      );
    },
  },
  {
    accessorKey: "business_name",
    header: "Customer",
    muiTableHeadCellProps: tableColumnStyle,
    Cell: ({ row }: { row: any }) => {
      return row?.original?.business_name ?? "N/A";
    },
  },
  {
    accessorKey: "business_city",
    header: "City",
    muiTableHeadCellProps: tableColumnStyle,
    Cell: ({ row }: { row: any }) => {
      return row?.original?.business_city ?? "N/A";
    },
  },
  {
    accessorKey: "business_state_code",
    header: "State",
    muiTableHeadCellProps: tableColumnStyle,
    Cell: ({ row }: { row: any }) => {
      return row?.original?.business_state_code ?? "N/A";
    },
  },
  {
    accessorKey: "business_phone",
    header: "Phone",
    muiTableHeadCellProps: tableColumnStyle,
    Cell: ({ row }: { row: any }) => {
      return row?.original?.business_phone ?? "N/A";
    },
  },
  {
    accessorKey: "status_code",
    header: "Status",
    muiTableHeadCellProps: tableColumnStyle,
    Cell: ({ row }: { row: any }) => {
      return row?.original?.status_code ?? "N/A";
    },
  },
  {
    accessorKey: "sales_rep",
    header: "Sales Rep",
    enableColumnFilter: false,
    enableSorting: false,
    muiTableHeadCellProps: tableColumnStyle,
    Cell: ({ row }: { row: any }) => {
      return row?.original?.sales_rep ?? "N/A";
    },
  },
];