import { pageBreadcrumbCurrentClassName, pageBreadcrumbLinkClassName, pageTitleClassName } from '@admin/components/ui/field-styles';

interface PageHeaderProps {
    title: string;
    subtitle?: string;
    description?: string;
}

export function PageHeader({ title, subtitle = 'Home', description }: PageHeaderProps) {
    return (
        <div className="block justify-between page-header md:flex">
            <div>
                <h3 className={pageTitleClassName}>{title}</h3>
                {description ? <p className="mb-0 mt-1 text-sm text-gray-500 dark:text-white/60">{description}</p> : null}
            </div>
            <ol className="flex items-center whitespace-nowrap min-w-0">
                <li className="text-sm">
                    <span className={pageBreadcrumbLinkClassName}>
                        {subtitle}
                        <i className="ti ti-chevrons-right flex-shrink-0 mx-3 overflow-visible text-gray-300 dark:text-gray-300 rtl:rotate-180" />
                    </span>
                </li>
                <li className={pageBreadcrumbCurrentClassName} aria-current="page">
                    {title}
                </li>
            </ol>
        </div>
    );
}