import * as React from "react";
import { ReactElement } from "react";

import { styleSheet } from '../StyleSheet'
const styles = styleSheet(require('./Separators.module.scss'));

export const Separated = ({ sep, items, children }: { children?: any, items?: ReactElement[], sep: ReactElement | string }) => {
    items ||= React.Children.toArray(children) as any;
    const bits = [];
    for (let i = 0; i < items.length; i++) {
        if (i > 0) {
            const sbit = typeof sep == 'string' ? sep : React.cloneElement(sep, { key: `sep-${i}` });
            bits.push(sbit);
        }
        bits.push(<span key={`item-${i}`} className={styles("token")}>
            {items[i]}
        </span>);
    }
    return <span className={styles('separated')}>{bits}</span>
}

Separated.stylesheet = styles;