import { makeStyles } from '@cleartrip/ct-design-style-manager';
import type { Theme } from '@cleartrip/ct-design-theme';

import { BoxSize } from './type';

/**
 * Static, platform-agnostic layout styles for Box.
 *
 * The variant-dependent `gap` + `flexDirection` are merged at render time
 * via `useStyles`.
 */
const boxStaticStyles = makeStyles(() => ({
  root: {
    display: 'flex',
  },
}));

const BOX_SIZE_SPACING_KEY: Record<BoxSize, keyof Theme['spacing']> = {
  xLarge: 10,
  big: 8,
  medium: 6,
  small: 4,
  tiny: 3,
  micro: 2,
  nano: 1,
  pico: 1,
  zero: 0,
};

export function getBoxGap(theme: Theme, boxSize: BoxSize): number {
  const spacingKey = BOX_SIZE_SPACING_KEY[boxSize] ?? 0;
  return theme.spacing[spacingKey] ?? 0;
}

/**
 * @deprecated Retained for any callers still using the old helper. Prefer
 * `getBoxGap` with the new Container-based composition.
 */
export function getBoxStyles({ boxSize, theme }: { boxSize: BoxSize; theme: Theme }) {
  return { gap: getBoxGap(theme, boxSize) };
}

export default boxStaticStyles;