import React, { ReactNode } from 'react';
import { ChevronLeft } from 'lucide-react';
import { Flex, FlexItem } from '../ui/flex';
import { useNavigate } from 'react-router-dom';

interface AppHeaderProps {
    showBackButton?: boolean;
    noBottomMargin?: boolean;
    children?: ReactNode;
    backTo?: string;
    // When provided, the Back button calls this instead of navigating - lets a dual-mode page (embedded in a
    // modal) return to its in-modal list rather than changing the route. Absent = the normal routed behavior.
    onBack?: () => void;
    title?: ReactNode;
    backLabel?: string;
}

const AppHeader: React.FC<AppHeaderProps> = ({ showBackButton = true, noBottomMargin = false, children, backTo = '..', onBack, title, backLabel = 'Back' }) => {
    const navigate = useNavigate();

    return (
        // Wraps rather than overlapping when Back and the actions do not fit on one line, as on a phone.
        <Flex wrap style={{ marginBottom: noBottomMargin ? 8 : 32 }}>
            <FlexItem>
                {showBackButton && (
                    <button type="button"
                            className="back-link"
                            onClick={() => onBack
                                ? onBack()
                                : navigate(backTo, {
                                    relative: 'path',
                                    state: { returningFromDetail: true }
                                })}>
                        <ChevronLeft className="w-4 h-4" />
                        {backLabel}
                    </button>
                )}
                {title && <h3 className="ak-section-title">{title}</h3>}
            </FlexItem>

            {children && (
                <FlexItem>
                    <Flex align="center" justify="flex-end" gap="8px" wrap>
                        {children}
                    </Flex>
                </FlexItem>
            )}
        </Flex>
    );
};

export default AppHeader;