import React from "react";
import './breadcrumb.css';
import Iconsvg from '../Icon/Icon';

type BreadcrumbItem = {
    label: string,
    to: string,
    active: boolean
}

const breadcrumbList:BreadcrumbItem[] = [
    {
        label: 'Home',
        to: '/',
        active: false,
    },
    {
        label: 'About',
        to: '/',
        active: false,
    },
    {
        label: 'Details',
        to: '/',
        active: true,
    }
]

type Props = {
    separator: any,
    size?: 'default' | 'small' | 'medium' | 'large',
}

const Breadcrumb = (props: Props) => {
    const {separator, size} = props;
    return (
        <div className={`breadcrumb-wrap ${size ? `breadcrumb-size-${size}` : ''}`}>
            <ul>
                {
                   breadcrumbList && breadcrumbList.map((item, index) => (
                        <li className={`${item.active ? 'active' : ''}`} key={index}>
                           <Iconsvg name={separator}/>
                           <span>{item.label}</span>
                        </li>
                   )) 
                }
                <li></li>
            </ul>
        </div>
    );
};

export default Breadcrumb;