import type {  Breakpoint, Responsive } from "@radix-ui/themes/props";

export const mapWithResponsive = <T extends string,K extends string>(
 args:  {value: Responsive<T>, mapFn: (value?:T)=>K |undefined}
): Responsive<K> | undefined => {
  const {value, mapFn} = args;
  if(typeof value === 'string'){
    return mapFn(value);
  };
  
  if(typeof value === 'object'){
    const newObj: Partial<Record<Breakpoint, K>> = {};
    let key: Breakpoint;
    for(key in value){
      newObj[key] = mapFn(value[key]);
    }
    return newObj;
  }
  return value;
};
