import type {ReactNode} from 'react';
import {createPortal} from 'react-dom';
import {StatusBadge} from '@nodedc/ui-react';
import type {ObservationHeaderTargets} from './observation';

/** The source owns liveness and retry actions; the host owns header placement. */
export function ObservationHeader({targets,live,label,children}:{targets:ObservationHeaderTargets;live:boolean;label:string;children?:ReactNode}){
 return <>{createPortal(<StatusBadge variant="indicator" tone={live?'success':'neutral'} role="img" aria-label={label} title={label}/>,targets.statusTarget)}{createPortal(children,targets.actionsTarget)}</>;
}