import React from 'react';
import styles from './silke-divider.scss';

type SpacePlacement = 'before' | 'after';
type DividerSpaceSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
type DividerSpace = DividerSpaceSize | `${SpacePlacement}-${DividerSpaceSize}`;
type SilkeDividerProps = {
  dark?: boolean;
  vertical?: boolean;
  space?: DividerSpace;
  vSpace?: DividerSpace;
  hSpace?: DividerSpace;
};

export function SilkeDivider({ vertical, dark, space, vSpace, hSpace }: SilkeDividerProps) {
  const cl = [dark ? styles.dark : styles.light, vertical ? styles.vertical : styles.horizontal];

  if (vSpace || space) cl.push(styles['v-space-' + (vSpace || space)]);
  if (hSpace || space) cl.push(styles['h-space-' + (hSpace || space)]);

  return <div className={cl.join(' ')} />;
}