import {Fragment} from "react"
import {assets} from "../../assets"
import {ImageView} from "../../atoms"
import {BreadCrumbsProps} from "../../props"
import styles from "./styles.module.sass"

export const BreadCrumbs = ({items}: BreadCrumbsProps) => {
  const renderBreadCrumb = (item: string, index: number) => (
    <Fragment key={index}>
      <h6 className={styles.bread_crumb}>{item}</h6>
      {!(index === items.length - 1) && <ImageView src={assets.ic_grey_arrow} alt="right-arrow" imgSize={16} />}
    </Fragment>
  )

  return <section className={`${styles.breadcrumb_section} flex`}>{items?.map(renderBreadCrumb)}</section>
}