import React, { useMemo } from 'react';
import * as S from "./styles"
import { BreadCrumbProps, Item } from './interface';
import { Icons } from '../Icons';
import { Home } from '@mui/icons-material';

const Breadcrumb: React.FC<BreadCrumbProps> = ({ items, onHomeClick, onPathClick }) => {
  const listItems = useMemo(() => {
    return items.map((item: Item, index: number, self: Item[]) => {
      const showIcon = self.length > index + 1
      const isFixedIcon = items[0] === item
      return (
        <div className='content' key={index} onClick={(event) => items[0] === item ? onHomeClick(event) : onPathClick(item, event)}>
          {isFixedIcon && <Icons icon={Home} />}
          {!isFixedIcon && item.icon && <Icons icon={item.icon} color='inherit' />}
          <S.Item>{item.label}</S.Item>
          {showIcon && <S.Divisor>/</S.Divisor>}
        </div>
      )
    })
  }, [items])

  return (
    <S.Container>
      <S.ListItems>
        {listItems}
      </S.ListItems>
    </S.Container>
  )
}

export default Breadcrumb