'use client';

import {PanelCard} from '@/shared/components/patterns/PanelCard';
import {SkeletonChart} from '@/shared/components/patterns/LoadingState';
import type {Resource} from '@/shared/hooks/useResource';

/**
 * A PanelCard specialised for charts.
 *
 * The only thing a chart panel adds over the generic one is that its skeleton
 * must reserve the chart's exact plotting height — otherwise the card resizes
 * when data lands and the whole page shifts under the cursor.
 *
 * This is deliberately a thin wrapper rather than a parallel implementation.
 * A separate ChartCard / AnalyticsCard / TableCard, each with its own copy of
 * the header and async wiring, is the duplication the pattern kit exists to
 * remove.
 */
export function ChartCard<T>({
  title,
  subtitle,
  actions,
  resource,
  height = 260,
  empty,
  children,
}: {
  title: string;
  subtitle?: string;
  actions?: React.ReactNode;
  resource: Resource<T>;
  height?: number;
  empty?: React.ReactNode;
  children: (data: T) => React.ReactNode;
}) {
  return (
    <PanelCard
      title={title}
      subtitle={subtitle}
      actions={actions}
      resource={resource}
      loading={<SkeletonChart height={height} />}
      empty={empty}
    >
      {children}
    </PanelCard>
  );
}
