import React from 'react';
import { PageHeader as SuitePageHeader } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';

interface Props {
    title?: string;
    subtitle?: string;
    breadcrumbs?: {
        label?: string;
        url?: string;
        key?: string;
    }[];
    children?: React.ReactNode;
}

export const PageHeader: React.FC<Props> = ({
    title,
    subtitle,
    breadcrumbs,
    children,
}) => {
    const subtitleComponent = subtitle && (
        <span className="PageTitle-subheader">
            <GlyphIcon name="dot" size={12} />
            {subtitle}
        </span>
    );

    return (
        <SuitePageHeader
            breadcrumbs={breadcrumbs?.filter((b): b is { label: string } =>
                Boolean(b.label)
            )}
        >
            <SuitePageHeader.MainContent>
                {title && (
                    <SuitePageHeader.Title>
                        {title}
                        {subtitleComponent}
                    </SuitePageHeader.Title>
                )}
                {children}
            </SuitePageHeader.MainContent>
        </SuitePageHeader>
    );
};