import { ReactNode } from 'react';
import { CtaBaseProps } from '../CtaProps';

interface SectionBadgeConfig {
  visible: boolean;
  skin?: 'light' | 'danger' | 'neutralLight';
}

/**
 * A summary item to display in the section header.
 * @external
 */
interface SectionSummaryItem {
  /**
   * An icon to display before the text.
   * @external
   */
  icon: ReactNode;
  /**
   * A label for the summary item.
   * @external
   */
  text: string;
  /**
   * A count value for the summary item.
   * @external
   */
  count: number;
}

export interface Section {
  /**
   * A title for the section.
   * @external
   */
  title: string;
  /**
   * A primary call to action for the section.
   * @overrideType [CtaBaseProps](./?path=/story/common-types--ctabaseprops)
   * @external
   */
  primaryAction?: CtaBaseProps;
  /**
   * A badge for the section. Configuration object for showing item count.
   * @external
   */
  badge?: SectionBadgeConfig;
  /**
   * Summary items to display in the section header.
   * Each item can have an icon, text label, and count.
   * @external
   */
  summary?: SectionSummaryItem[];
  /**
   * Whether the section is collapsed.
   * When true, the section items are hidden.
   * @external
   */
  collapsed?: boolean;
}

/**
 * A function that extracts the grouping key from an item.
 * @external
 */
export type GroupBy<T> = (item: T) => string;

/**
 * A function that renders section configuration given the section ID and all items in the section.
 * @external
 */
export type RenderSection<T> = (sectionId: string, items: T[]) => Section;

/**
 * Event callbacks for section interactions.
 * @external
 */
export interface SectionEvents {
  /**
   * Called when a section is toggled (collapsed/expanded).
   * @param sectionId - The ID of the section being toggled
   * @param isCollapsed - Whether the section is now collapsed
   * @external
   */
  onToggle?: (sectionId: string, isCollapsed: boolean) => void;
}