import React, {ReactNode} from 'react';

type DirectoryEntryProps = {
    entries: any,
    depth: number
}

const DirectoryEntry = ({entries, depth}: DirectoryEntryProps) => {

    return (
        <div className={'directory depth-' + depth} style={{paddingLeft: '50px'}}>
            {
                Object.entries(entries).map(([key, value]) => {

                        if (typeof value === "string")
                            return (
                                <p onClick={()=>console.log(value)}>
                                    {key}
                                </p>
                            )
                        else {

                        }
                        return (
                            <>
                                <p>{key}</p>
                                <DirectoryEntry entries={value} depth={depth + 1}/>
                            </>

                        )
                    }
                )
            }
        </div>
    );
}

export default DirectoryEntry;