import React, { Children, ReactElement } from "react";

type Props = {
    divider: "dotted" | "slash";
    children: React.ReactNode;
    className?: string;
} ;

/* ---------- a random number for a unique key (react requirement) ---------- */

function randomInteger( min: number, max: number ) {
    let rand = min + Math.random() * (max + 1 - min);
    return Math.floor(rand);
  }

/* ----------------------- get the divider as designed ---------------------- */

function GetDivider( symbol: string ) {
    const dividers = {
        'dotted' : <span className='inline-block h-1 w-1 bg-gray-500 rounded m-1 text-center' key={ randomInteger(20, 1000) }></span>,
        'slash'  : <span className='fz-12 f-gray-700 m-1' key={ randomInteger(20, 1000) }>/</span>,
    }
    return ( symbol === 'dotted') ? dividers.dotted : dividers.slash    
}

export default function Breadcrumbs( { divider ,children, className }: Props ) {
    
    /* -------------- Convert the children into an array and insert ------------- */
    /* ------------------the elements with the divider into it ------------------ */

    let childrenToArray = React.Children.toArray(children)
    let LinkAndDivider: any 
    LinkAndDivider = [];
    
    for( let i = 0; i < childrenToArray.length; i++ ) {
                 
        let dividerComponent = GetDivider( divider ) 
        LinkAndDivider = LinkAndDivider.concat( <div>{childrenToArray[i]}</div> ).concat( dividerComponent )
    }
    LinkAndDivider.pop();

    return(
            <div className={ className }> 
                { LinkAndDivider }                   
            </div>     
            
    )
}