import { ComponentPropsWithRef } from "react"
import { Link } from "react-router-dom"
import { mapArray } from "@utils/mapArray"
import "./Breadcrumb.scss"

interface BreadcrumbProps extends ComponentPropsWithRef<"ol"> {
    $data?: Array<{ title?: string, url?: string }>
}
export default function Breadcrumb({ $data, ...props }: BreadcrumbProps) {
    return (
        <ol {...props} className={`sxs-bcrm${props.className ? ` ${props.className}` : ""}`}>
            {
                mapArray($data, (ITEM, idx) => (
                    <li key={idx + "--" + ITEM?.title + "__" + ITEM?.url} className="sxs-bcrm__ite">
                        {
                            ITEM?.url ? (
                                <Link to={ITEM.url}>{ITEM?.title}</Link>
                            ) : (
                                <span>{ITEM?.title}</span>
                            )
                        }
                    </li>
                ))
            }
        </ol>
    )
}