import * as stylex from "@stylexjs/stylex";
import { styles as shared } from "@/ui/styles";
import { colors } from "@/ui/tokens.stylex";
import { dismissRestartBanner, useRestartBanner } from "./restartBanner";

const styles = stylex.create({
	banner: {
		display: "flex",
		alignItems: "center",
		gap: "0.75rem",
		borderBottomWidth: 1,
		borderBottomStyle: "solid",
		borderBottomColor: colors.warnBorder,
		backgroundColor: colors.warnSurface,
		color: colors.warnText,
		paddingInline: "1rem",
		paddingBlock: "0.5rem",
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
	},
	message: {
		flex: 1,
	},
	dismiss: {
		borderRadius: "0.25rem",
		borderWidth: 1,
		borderStyle: "solid",
		borderColor: colors.warnBorderStrong,
		backgroundColor: "transparent",
		color: "inherit",
		paddingInline: "0.5rem",
		paddingBlock: "0.25rem",
		fontSize: "0.75rem",
		lineHeight: "1rem",
	},
});

export default function RestartBanner() {
	const raised = useRestartBanner();
	if (!raised) return null;
	return (
		<div role="status" {...stylex.props(styles.banner)}>
			<span {...stylex.props(styles.message)}>Changes saved. Restart nxdns to apply.</span>
			<button type="button" onClick={dismissRestartBanner} {...stylex.props(styles.dismiss, shared.focusRing)}>
				Dismiss
			</button>
		</div>
	);
}
