import React from 'react';
import { __ } from '@wordpress/i18n';
import { ChevronLeft } from 'lucide-react';

/**
 * Compact brand-colored header used by every view except Home.
 */
const ViewHeader = ({ title, subtitle, avatar, onBack, actions }) => (
    <div className="aisk-view-header">
        {onBack && (
            <button type="button" className="aisk-icon-button" onClick={onBack} aria-label={__( 'Back', 'aisk-ai-chat' )}>
                <ChevronLeft size={22} />
            </button>
        )}
        {avatar}
        <div className="aisk-view-header-text">
            <span className="aisk-view-header-title">{title}</span>
            {subtitle && <span className="aisk-view-header-subtitle">{subtitle}</span>}
        </div>
        {actions}
    </div>
);

export default ViewHeader;