import type { ReactNode } from 'react';

import type { Styles } from '@cleartrip/ct-design-types';

/**
 * Type of marker displayed for each list item.
 *   - `'ol'` — numbered list (1. 2. 3.)
 *   - `'ul'` — bullet list (•)
 */
export type BulletedListType = 'ol' | 'ul';

/**
 * `styleConfig` slots for fine-grained style overrides on BulletedList.
 */
export interface IBulletedListStyleConfig {
  /**
   * Styles for the outer row container wrapping each list item.
   */
  itemWrapper?: Styles[];

  /**
   * Styles for the marker container (bullet/number placeholder area).
   */
  placeHolder?: Styles[];

  /**
   * Styles for the content container where `renderItem` output is
   * displayed.
   */
  itemContent?: Styles[];

  /**
   * Styles for the marker row (number + dot on ordered lists).
   */
  marker?: Styles[];
}

/**
 * Props for the BulletedList component.
 *
 * @typeParam T - Shape of each list item. An optional `id` property,
 * if present, is used as the React key; otherwise the array index is
 * used.
 */
export interface IBulletedListProps<T extends { id?: string | number }> {
  /**
   * Items to render. Keys come from `item.id` when defined, else the
   * row index.
   */
  list: T[];

  /**
   * Callback that receives the current item and its index, returning
   * the React content for that row.
   */
  renderItem: (item: T, index: number) => ReactNode;

  /**
   * Type of marker to display. Defaults to `'ol'`.
   */
  listType?: BulletedListType;

  /**
   * `styleConfig` slots for fine-grained style overrides.
   */
  styleConfig?: IBulletedListStyleConfig;
}