import { SerializedStyles } from '@emotion/react';

import { colors } from '../../../../src/style/variables';

import { GumComponentGrids, GumGridConfig, GumMainGrid } from './GumVars';

export type GeneratorOutput = SerializedStyles | '';

export type GumColorVarGenerator = (c: typeof colors) => string[];

export type GumGridGenerator = (
  gridConfig?: GumGridConfig[],
) => SerializedStyles;

export type GumComponentGridGenerator = () => {
  [k in GumComponentGrids | GumMainGrid]: SerializedStyles;
};

export type GumGridGapGenerator = (
  gap: GumGridConfig['gap'],
) => GeneratorOutput;

interface GumTemplateInput {
  cols: GumGridConfig['cols'];
  template: GumGridConfig['template'];
}

export type GumTemplateGenerator = (input: GumTemplateInput) => GeneratorOutput;