import { Breakpoint, breakpoints } from '../breakpoints';
import { CSSPropertiesWithVars } from '../types';

type ResponsiveTokenRule = {
  [x in Breakpoint]?: Record<string, string>;
};

type CreateResponsiveTokenReturn = {
  [query: string]: CSSPropertiesWithVars;
};

export function createResponsiveToken(
  rule: ResponsiveTokenRule,
): CreateResponsiveTokenReturn {
  const result: CreateResponsiveTokenReturn = {};

  for (const [breakpoint, tokens] of Object.entries(rule)) {
    const breakpointRule = breakpoints[breakpoint as Breakpoint];

    result[breakpointRule] = {
      vars: tokens,
    };
  }

  return result;
}