"use client";

import { GridColDef } from "@mui/x-data-grid-pro";
import { List } from "ui";

export default function Page() {
  const columns: GridColDef[] = [
    {
      field: "id",
      headerName: "ID",
      flex: 1,
    },
    {
      field: "phoneNumber",
      headerName: "Phone Number",
      flex: 2,
    },
    {
      field: "createdAt",
      headerName: "Created At",
      valueGetter: (params: any) =>
        new Date(params.row?.createdAt).toLocaleString(),
      flex: 1,
    },
    {
      field: "updatedAt",
      headerName: "Updated At",
      valueGetter: (params: any) =>
        new Date(params.row?.updatedAt).toLocaleString(),
      flex: 1,
    },
  ];

  const rows = [
    {
      id: 1,
      phoneNumber: "1234567890",
      createdAt: new Date(),
      updatedAt: new Date(),
    },
    {
      id: 2,
      phoneNumber: "1234567890",
      createdAt: new Date(),
      updatedAt: new Date(),
    },
    {
      id: 3,
      phoneNumber: "1234567890",
      createdAt: new Date(),
      updatedAt: new Date(),
    },
    {
      id: 4,
      phoneNumber: "1234567890",
      createdAt: new Date(),
      updatedAt: new Date(),
    },
    {
      id: 5,
      phoneNumber: "1234567890",
      createdAt: new Date(),
      updatedAt: new Date(),
    },
    {
      id: 6,
      phoneNumber: "1234567890",
      createdAt: new Date(),
      updatedAt: new Date(),
    },
    {
      id: 7,
      phoneNumber: "1234567890",
      createdAt: new Date(),
      updatedAt: new Date(),
    },
    {
      id: 8,
      phoneNumber: "1234567890",
      createdAt: new Date(),
      updatedAt: new Date(),
    },
    {
      id: 9,
      phoneNumber: "1234567890",
      createdAt: new Date(),
      updatedAt: new Date(),
    },
    {
      id: 10,
      phoneNumber: "1234567890",
      createdAt: new Date(),
      updatedAt: new Date(),
    },
  ];

  return (
    <List
      title="Whatsapp Bots"
      entity="whatsapp"
      rows={rows}
      columns={columns}
    />
  );
}
