"use client";
import { DataTable } from "@/components/shared/data-table";
import { StatusBadge } from "@/components/shared/page";
import { currency, dateTime } from "@/lib/format";
import { sessions, type Session } from "./fixtures";
export function SessionTable({
  rows = sessions,
  title = "Recent Sessions",
}: {
  rows?: readonly Session[];
  title?: string;
}) {
  return (
    <DataTable
      title={title}
      rows={rows}
      columns={[
        { key: "id", label: "Session ID" },
        { key: "user", label: "Customer" },
        { key: "chargepoint", label: "Chargestation" },
        {
          key: "energy",
          label: "Energy (kWh)",
          render: (r) => r.energy.toFixed(2),
        },
        { key: "amount", label: "Revenue", render: (r) => currency(r.amount) },
        {
          key: "status",
          label: "Status",
          render: (r) => <StatusBadge>{r.status}</StatusBadge>,
        },
        {
          key: "startedAt",
          label: "Start Time",
          render: (r) => dateTime(r.startedAt),
        },
      ]}
      filters={[
        {
          key: "status",
          label: "Status",
          options: ["Completed", "Charging", "Failed"],
        },
      ]}
    />
  );
}