import type { ReactNode } from 'react';

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

export type BoxSize = 'xLarge' | 'big' | 'medium' | 'small' | 'tiny' | 'micro' | 'nano' | 'pico' | 'zero';

export interface IBoxStyleConfig {
  /**
   * Styles for the root container of the box.
   */
  root?: Styles[];
}

export interface IBoxProps {
  children?: ReactNode;
  /**
   * Style configuration overrides for the root container.
   */
  styleConfig?: IBoxStyleConfig;
  /**
   * Fired when the root container is clicked/pressed.
   */
  onClick?: () => void;
  /**
   * Lays the contents out horizontally.
   * @default false
   */
  horizontal?: boolean;
  /**
   * Sets the row or column gap between child elements.
   */
  boxSize: BoxSize;
}

/**
 * @deprecated Kept for backward compatibility with the previous emotion-styled
 * implementation; use `IBoxProps` going forward.
 */
export type BoxProps<T = Record<string, unknown>> = IBoxProps & T;