'use client';

import type { DehydratedState } from '@tanstack/react-query';
import {
  AlertChannelsManager,
  MonitorChecksManager,
  DlqDepthPanel,
  OutboxAbandonedPanel,
} from '@/features/admin-system-health';
import { Stack } from '@/components/ui/layout/Stack';
import type { Locale } from '@/lib/i18n';

export type MonitoringPanelProps = {
  locale: Locale;
  channelsDehydrated?: DehydratedState;
  checksDehydrated?: DehydratedState;
  dlqDehydrated?: DehydratedState;
  outboxDeadDehydrated?: DehydratedState;
};

export function MonitoringPanel({
  locale,
  channelsDehydrated,
  checksDehydrated,
  dlqDehydrated,
  outboxDeadDehydrated,
}: MonitoringPanelProps) {
  return (
    <Stack gap="6">
      <AlertChannelsManager locale={locale} dehydratedState={channelsDehydrated} />
      <MonitorChecksManager locale={locale} dehydratedState={checksDehydrated} />
      <DlqDepthPanel locale={locale} dehydratedState={dlqDehydrated} />
      <OutboxAbandonedPanel locale={locale} dehydratedState={outboxDeadDehydrated} />
    </Stack>
  );
}