import React from 'react';

import { Flexbox } from './Flexbox';

import { ChevronRight } from 'react-feather';

import '../styles/breadcrumb.css'

import { Link } from 'react-router-dom';

export const Breadcrumb = ({ root, links }) => {
    return (
        <div className='breadcrumb'>
             <Flexbox style={{ columnGap: 5 }}>
                <Link to={root.link}>
                    <a style={{ color: '#191919', fontWeight: 'bold', textDecoration: 'none' }}>{root.text}</a>
                </Link>
              
                {links.map(link => (
                    <>
                        <ChevronRight strokeWidth={3} size={22} color="#787878" />
                        <Link to={link.link}>
                            <a>{link.text}</a>
                        </Link>
                        
                    </>
                ))}
            </Flexbox>
        </div>
       
    );
}