import { dash, omit } from 'radash';

export type Theme = { breakpoints: string[] };
function min(breakpoint: string, style: string) {
  return `@media (min-width: ${breakpoint})
    {
      ${style}
    }`;
}
export function getStyles<T>(props: Record<string, T | T[]>, theme: Theme) {
  const cleanProps = omit(props, ['children', 'id', 'key', 'className']);

  return (Object.keys(cleanProps) as Array<keyof typeof props>).map((name) => {
    const styleValues = cleanProps[name];
    if (Array.isArray(styleValues)) {
      const [firstStyle, ...values] = styleValues;

      return theme.breakpoints
        .map((breakpoint, i) => {
          if (!values[i]) return undefined;
          const style = `${dash(name)}:${values[i]}`;

          return min(breakpoint, style);
        })
        .concat([`${dash(name)}:${firstStyle};`])
        .join(' ');
    }

    return `${dash(name)}:${styleValues};`;
  });
}