import WidgetModule from "@insite/client-framework/Types/WidgetModule";
import WidgetProps from "@insite/client-framework/Types/WidgetProps";
import PageBreadcrumbs, { PageBreadcrumbsStyles } from "@insite/content-library/Components/PageBreadcrumbs";
import * as React from "react";
import { FC } from "react";
import { css } from "styled-components";

export interface BreadcrumbsStyles {
    pageBreadcrumbs?: PageBreadcrumbsStyles;
}

export const breadcrumbStyles: BreadcrumbsStyles = {
    pageBreadcrumbs: {
        breadcrumbs: {
            css: css`
                padding-bottom: 30px;
            `,
        },
    },
};

export const Breadcrumbs: FC<WidgetProps> = () => {
    return <PageBreadcrumbs extendedStyles={breadcrumbStyles.pageBreadcrumbs} />;
};

const widgetModule: WidgetModule = {
    component: Breadcrumbs,
    definition: {
        group: "Basic",
        icon: "chevrons-right",
    },
};

export default widgetModule;
