/**
 * Header Component
 *
 * @package Advanced_Customer_Account
 */

import { __ } from '@wordpress/i18n';

/**
 * Route titles mapping.
 */
const routeTitles = {
    dashboard: __( 'Dashboard', 'advanced-customer-account' ),
    orders: __( 'Orders', 'advanced-customer-account' ),
    addresses: __( 'Addresses', 'advanced-customer-account' ),
    profile: __( 'Account Details', 'advanced-customer-account' ),
};

/**
 * Get page title from route.
 *
 * @param {string} route Current route.
 * @return {string} Page title.
 */
const getPageTitle = ( route ) => {
    // Handle order view
    if ( route.startsWith( 'orders/' ) ) {
        return __( 'Order Details', 'advanced-customer-account' );
    }

    return routeTitles[ route ] || __( 'Dashboard', 'advanced-customer-account' );
};

/**
 * Header component.
 *
 * @param {Object}   props              Component props.
 * @param {Function} props.onMenuToggle Menu toggle handler.
 * @param {string}   props.currentRoute Current route.
 * @return {JSX.Element} Header component.
 */
const Header = ( { onMenuToggle, currentRoute } ) => {
    const pageTitle = getPageTitle( currentRoute );

    return (
        <header className="aca-header">
            <div className="aca-header__left">
                <button
                    type="button"
                    className="aca-header__menu-toggle"
                    onClick={ onMenuToggle }
                    aria-label={ __( 'Toggle menu', 'advanced-customer-account' ) }
                >
                    <span className="dashicons dashicons-menu" aria-hidden="true" />
                </button>
                <h1 className="aca-header__title">{ pageTitle }</h1>
            </div>

            <div className="aca-header__right">
                { /* Future: notifications, quick actions */ }
            </div>
        </header>
    );
};

export default Header;