import { CSSProperties } from 'react';

const camelToKebab = (str: string): string =>
  str.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());

export function cssPropsToString(style: CSSProperties | undefined): string {
  if (!style) return '';
  return Object.entries(style)
    .filter(([, v]) => v !== undefined && v !== null && v !== '')
    .map(([k, v]) => `${camelToKebab(k)}:${v}`)
    .join(';');
}

export function mergeStyles(...styles: (CSSProperties | undefined)[]): CSSProperties {
  return Object.assign({}, ...styles.filter(Boolean));
}
