import type { ReactNode } from 'react';
import { Heading } from '@astryxdesign/core/Heading';
import { Text } from '@astryxdesign/core/Text';
import { HStack } from '@astryxdesign/core/HStack';

export interface SectionHeaderProps {
  title: string;
  /**
   * Sits inline beside the title, not beneath it.
   *
   * Required rather than optional on purpose: a bare heading tells the reader
   * what a block is called but not what it is showing them, and every section
   * in this console has something worth saying there.
   */
  note: string;
  /** A control or a "View all" link, right-aligned. */
  action?: ReactNode;
}

export function SectionHeader({ title, note, action }: SectionHeaderProps) {
  return (
    <HStack justify="between" align="center" gap={2} wrap="wrap">
      <HStack align="center" gap={1.5} wrap="wrap">
        <Heading level={2}>
          {title}
        </Heading>
        <Text type="body" color="secondary">
          {note}
        </Text>
      </HStack>
      {action}
    </HStack>
  );
}