import { createPortal } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { CircleCheck } from 'lucide-react';
import { SearchBox } from './SearchBox';
import { PrimaryButton } from '@admin/components/PrimaryButton';

const PORTAL_TARGET_ID = 'advads-settings-header-actions';

export function SettingsHeaderActionsSlot() {
	return (
		<div
			id={ PORTAL_TARGET_ID }
			className="flex min-w-0 flex-1 items-center gap-4"
		/>
	);
}

export function SettingsHeaderActions( {
	tabs,
	onNavigate,
	isDirty,
	justSaved,
	onSave,
} ) {
	const target = document.getElementById( PORTAL_TARGET_ID );

	if ( ! target ) {
		return null;
	}

	return createPortal(
		<>
			<SearchBox tabs={ tabs } onNavigate={ onNavigate } />
			<div className="ml-auto flex items-center gap-3">
				{ justSaved && (
					<span className="flex items-center gap-1 text-sm text-green-600">
						<CircleCheck className="size-4" />
						{ __( 'Saved', 'advanced-ads' ) }
					</span>
				) }
				<PrimaryButton onClick={ onSave } disabled={ ! isDirty }>
					{ __( 'Save Changes', 'advanced-ads' ) }
				</PrimaryButton>
			</div>
		</>,
		target
	);
}