'use client';

import {VStack, HStack} from '@astryxdesign/core/Layout';
import {Heading, Text} from '@astryxdesign/core/Text';

/**
 * Title + optional subtitle + optional trailing actions.
 *
 * This block was being hand-built in ChartCard, ActivityTimeline, Loyaly AI
 * panel and AiTab, each with slightly different heading levels and gaps. It is
 * the single most repeated shape in the app, so it gets one definition.
 *
 * `level` exists because the same visual treatment has to sit at different
 * depths in the document outline — a panel inside a page is an h4 even though
 * it looks identical to an h3 elsewhere. Screen-reader users navigate by that
 * outline, so it must stay accurate.
 */
export function SectionHeader({
  title,
  subtitle,
  actions,
  level = 2,
}: {
  title: string;
  /**
   * A plain string gets the standard secondary treatment. A node is rendered
   * as-is, which is what lets entity cards — whose "subtitle" is an icon plus
   * a value — share this component instead of rebuilding the same
   * title / sub / trailing-action arrangement.
   */
  subtitle?: React.ReactNode;
  actions?: React.ReactNode;
  level?: 2 | 3 | 4 | 5;
}) {
  return (
    <HStack hAlign="between" vAlign="start" gap={3}>
      <VStack gap={0.5}>
        <Heading level={level}>{title}</Heading>
        {typeof subtitle === 'string' ? (
          <Text size="sm" color="secondary">
            {subtitle}
          </Text>
        ) : (
          subtitle
        )}
      </VStack>
      {actions ? (
        <HStack gap={1} vAlign="center">
          {actions}
        </HStack>
      ) : null}
    </HStack>
  );
}
