import { ReactNode } from 'react';
import { useNavigate } from 'react-router-dom';
import { ArrowLeft, LucideIcon } from 'lucide-react';
import { Breadcrumbs } from './Breadcrumbs';

interface PageHeaderProps {
    title: string;
    subtitle?: string;
    icon?: LucideIcon;
    iconColor?: string;
    showBack?: boolean;
    showBreadcrumbs?: boolean;
    actions?: ReactNode;
    children?: ReactNode;
}

export function PageHeader({
    title,
    subtitle,
    icon: Icon,
    iconColor = 'text-[var(--color-primary)]',
    showBack = false,
    showBreadcrumbs = true,
    actions,
    children
}: PageHeaderProps) {
    const navigate = useNavigate();

    return (
        <div className="mb-6">
            {showBreadcrumbs && <Breadcrumbs />}

            <header className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div className="flex items-center gap-3">
                    {showBack && (
                        <button
                            onClick={() => navigate(-1)}
                            className="p-2 -ml-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 text-[var(--color-text-tertiary)] transition-colors"
                            aria-label="Go back"
                        >
                            <ArrowLeft size={20} />
                        </button>
                    )}

                    {Icon && (
                        <div className={`p-2 rounded-lg bg-slate-100 dark:bg-slate-800 ${iconColor}`}>
                            <Icon size={24} />
                        </div>
                    )}

                    <div>
                        <h1 className="text-2xl font-bold text-[var(--color-text-primary)]">
                            {title}
                        </h1>
                        {subtitle && (
                            <p className="text-sm text-[var(--color-text-tertiary)] mt-0.5">
                                {subtitle}
                            </p>
                        )}
                    </div>
                </div>

                {actions && (
                    <div className="flex items-center gap-2">
                        {actions}
                    </div>
                )}
            </header>

            {children}
        </div>
    );
}
