"use client";

import { PageHeader, Tabs } from "@/components/ui";
import QueuePanel from "@/components/panels/QueuePanel";
import ProcessedPanel from "@/components/panels/ProcessedPanel";
import FailedPanel from "@/components/panels/FailedPanel";
import ProcessingLogPanel from "@/components/panels/ProcessingLogPanel";

export default function MonitoringPage() {
  return (
    <>
      <PageHeader title="Monitoring" description="The live product processing queue, processed products, failed products you can retrigger, and a step-by-step log of everything the system processes." />
      <Tabs
        tabs={[
          { id: "queue", label: "Product Queue", render: () => <QueuePanel /> },
          { id: "processed", label: "Processed", render: () => <ProcessedPanel /> },
          { id: "failed", label: "Failed", render: () => <FailedPanel /> },
          { id: "log", label: "Log", render: () => <ProcessingLogPanel /> },
        ]}
      />
    </>
  );
}