const SCALE = [
  { key: '160', px: '160px', rem: '10rem' },
  { key: '96', px: '96px', rem: '6rem' },
  { key: '80', px: '80px', rem: '5rem' },
  { key: '64', px: '64px', rem: '4rem' },
  { key: '48', px: '48px', rem: '3rem' },
  { key: '40', px: '40px', rem: '2.5rem' },
  { key: '32', px: '32px', rem: '2rem' },
  { key: '24', px: '24px', rem: '1.5rem' },
  { key: '16', px: '16px', rem: '1rem' },
  { key: '12', px: '12px', rem: '0.75rem' },
  { key: '8', px: '8px', rem: '0.5rem' },
  { key: '4', px: '4px', rem: '0.25rem' },
  { key: '2', px: '2px', rem: '0.125rem' },
];

const scaleMap = SCALE.reduce((acc, token) => {
  acc[token.key] = token;
  acc[`space-${token.key}`] = token;
  return acc;
}, {});

export const SPACING_SCALE = SCALE;

export const Spacing = ({
  size = '16',
  axis = 'vertical',
  as: Component = 'div',
  className = '',
  style = {},
  thickness = '1px',
  ...props
}) => {
  const normalized = typeof size === 'number' ? String(size) : size;
  const token = scaleMap[normalized] || scaleMap['16'];
  const cssVar = `var(--space-${token.key})`;

  const dimensionStyle =
    axis === 'horizontal'
      ? { width: cssVar, height: thickness }
      : axis === 'square'
        ? { width: cssVar, height: cssVar }
        : { height: cssVar, width: thickness };

  return (
    <Component
      className={className}
      style={{ display: 'inline-flex', ...dimensionStyle, ...style }}
      aria-hidden="true"
      {...props}
    />
  );
};

export default Spacing;

