'use client';

import {Card} from '@astryxdesign/core/Card';
import {VStack} from '@astryxdesign/core/Layout';
import {AsyncBoundary} from '@/shared/components/data/AsyncBoundary';
import {SectionHeader} from './SectionHeader';
import type {Resource} from '@/shared/hooks/useResource';

/**
 * The standard workspace panel: a card with a header and asynchronous content.
 *
 * This is the shape every analytics surface in the app shares — charts,
 * tables, feeds, grids. Rather than a separate ChartCard, AnalyticsCard,
 * TableCard and FeedCard (four near-identical components, which is the
 * duplication we are trying to remove), there is one panel and callers vary
 * the loading shape.
 *
 * The async wiring lives HERE rather than in each panel's body so that feature
 * components only ever receive resolved data. That is what stops each module
 * inventing its own error treatment.
 */
export function PanelCard<T>({
  title,
  subtitle,
  actions,
  resource,
  loading,
  empty,
  headingLevel = 2,
  children,
}: {
  title: string;
  subtitle?: string;
  actions?: React.ReactNode;
  resource: Resource<T>;
  loading: React.ReactNode;
  empty?: React.ReactNode;
  headingLevel?: 2 | 3 | 4 | 5;
  children: (data: T) => React.ReactNode;
}) {
  return (
    <Card>
      <VStack gap={4}>
        <SectionHeader
          title={title}
          subtitle={subtitle}
          actions={actions}
          level={headingLevel}
        />
        <AsyncBoundary resource={resource} loading={loading} empty={empty}>
          {children}
        </AsyncBoundary>
      </VStack>
    </Card>
  );
}

/**
 * A panel with no asynchronous content — static or already-resolved data.
 * Same chrome, so a static panel and a loaded one are visually identical.
 */
export function StaticPanel({
  title,
  subtitle,
  actions,
  headingLevel = 2,
  children,
}: {
  title: string;
  subtitle?: string;
  actions?: React.ReactNode;
  headingLevel?: 2 | 3 | 4 | 5;
  children: React.ReactNode;
}) {
  return (
    <Card>
      <VStack gap={4}>
        <SectionHeader
          title={title}
          subtitle={subtitle}
          actions={actions}
          level={headingLevel}
        />
        {children}
      </VStack>
    </Card>
  );
}
