---
import type { SlBreadcrumb } from '@shoelace-style/shoelace';
import type { HTMLAttributes } from 'astro/types';

interface Props extends Omit<SlBreadcrumb, any>, Partial<HTMLAttributes<'div'>> {
    /**
     * The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
     * screen readers and other assistive devices to provide more context for users.
     */
    label?: string;
    separatorName?: string;
    separatorSrc?: string;
}

const { label, separatorName, separatorSrc, ...rest } = Astro.props;

---

<sl-breadcrumb {label} {...rest}>
    <sl-icon name={separatorName} src={separatorSrc} slot="separator"></sl-icon>
    <slot />
</sl-breadcrumb>

<script>
    import '@shoelace-style/shoelace/dist/components/breadcrumb/breadcrumb.js';
</script>