import { ReactNode } from "react";
import { KiroGhostBlinking } from "../kiro-ghost-blinking";
import { ModalSectionContainer } from "./modal-section-container";

interface Action {
	label: string;
	disabled?: boolean;
	onClick: () => void;
}

interface HeaderProps {
	action?: Action;
	subTitle?: ReactNode;
	title?: ReactNode;
	withGhost?: boolean;
	onBack?: () => void;
}

export function ModalHeader({
	action,
	subTitle,
	title,
	withGhost,
	onBack,
}: HeaderProps): React.JSX.Element {
	return (
		<ModalSectionContainer>
			<div className="kiro-modal-header">
				<div className="kiro-modal-header-content">
					{onBack && (
						<button onClick={onBack} className="kiro-modal-header-back">
							<i className="codicon codicon-arrow-left" />
						</button>
					)}
					{withGhost && (
						<KiroGhostBlinking withPurpleBackground={true} size="sm" />
					)}
					{(title || subTitle) && (
						<div className="kiro-modal-header-text">
							{title && <div className="kiro-modal-header-title">{title}</div>}
							{subTitle && (
								<div className="kiro-modal-header-sub-title">{subTitle}</div>
							)}
						</div>
					)}
				</div>
				{action && (
					<button
						className="kiro-button kiro-button-outline"
						disabled={action.disabled}
						onClick={action.onClick}
					>
						{action.label}
					</button>
				)}
			</div>
		</ModalSectionContainer>
	);
}
