"use client";

import { useState } from "react";
import ListTenant from "@/components/form/ListTenant";
import ChargerMonitoring from "@/components/monitoring/ChargerMonitoring"

export default function ChargerMonitoringPage() {
    const [tenantId, setTenantId] = useState<string>("");
    const [monitoringKey, setMonitoringKey] = useState(0);

    const handleStartMonitoring = (tenantId: string) => {
        setTenantId(tenantId);
        setMonitoringKey((prev) => prev + 1);
    };
    return (
        <>
        <main id="content" className="page-body">
            <div className="container-xl">
                <div className="row row-cards">
                    <div className="col-3">
                        <ListTenant onStartMonitoring={handleStartMonitoring}/>
                    </div>
                    <div className="col-9">
                        <ChargerMonitoring tenantId={tenantId} monitoringKey={monitoringKey}/>
                    </div>
                </div>
            </div>
        </main>
        </>
    )
}