<template lang="pug">
.o-breadcrumb
	ul.flex.o-breadcrumb__list
		li.pr-2.o-breadcrumb__item(
			v-for="(item, index) in items"
			:key="`bcItem${item.id}`"
		)
			p.flex.items-center.mb-0.o-breadcrumb__text(
				v-if="index < items.length - 1"
			)
				a.mr-1.o-breadcrumb__link(
					:href="item.url"
				) {{ item.text }}

				//@slot icon
				slot(name="icon")
					Icon(:name="separatorIconName")

			p.o-breadcrumb__text(
				v-else
			) {{ item.text }}
</template>

<script>
import Icon from '@/components/Icon'

export default {
	props: {
		/** Breadcrumb items Array\<_BreadcrumbItem_\>
		 *
		 * ----
		 *
		 * _BreadcrumbItem_ object properties:
		 *
		 * - `id` (_string_): identifier
		 * - `text` (_string_): Text of the breadcrumb item
		 * - `url` (_string_): url of the breadcrumb item
		 */
		items: {
			type: Array,
			default: () => [],
		},
		/** separator icon name */
		separatorIconName: {
			type: String,
			default: 'chevron-right24',
		},
	},
	components: {
		Icon,
	},
}
</script>

<docs>
```jsx
const arr = [
    {
        id: 0,
        text: 'Home',
        url: '#'
    },
    {
        id: 1,
        text: 'Elements',
        url: '#/Elements'
    },
    {
        id: 2,
        text: 'Breadcrumbs',
        url: '#'
    }
]

<Breadcrumbs :items="arr">
	<template v-slot:icon>
	<Icon name="chevron-right24" path="/spritemap.svg" />
</template>
</Breadcrumbs>
```
</docs>
