const SCALE = [
  { key: '4', px: '4px', rem: '0.25rem' },
  { key: '8', px: '8px', rem: '0.5rem' },
  { key: '12', px: '12px', rem: '0.75rem' },
  { key: '16', px: '16px', rem: '1rem' },
  { key: '24', px: '24px', rem: '1.5rem' },
  { key: '32', px: '32px', rem: '2rem' },
];

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

export const RADIOS_SCALE = SCALE;

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

  return (
    <Component
      className={className}
      style={{ borderRadius: cssVar, ...style }}
      {...props}
    />
  );
};

export default Radios;

