import * as stylex from "@stylexjs/stylex";
import { styles as shared } from "@/ui/styles";
import { colors } from "@/ui/tokens.stylex";
import { useAuthority } from "./authority";

const styles = stylex.create({
	banner: {
		borderBottomWidth: 1,
		borderBottomStyle: "solid",
		borderBottomColor: colors.warnBorder,
		backgroundColor: colors.warnSurface,
		color: colors.warnText,
		paddingInline: "1rem",
		paddingBlock: "0.5rem",
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
	},
});

/**
 * File authority is a standing condition, not an event, so this banner has no
 * dismiss button: it stays up for as long as the process runs from a file.
 */
export default function ReadOnlyConfigBanner() {
	const authority = useAuthority();
	if (authority?.mode !== "managed_file") return null;
	return (
		<div role="status" {...stylex.props(styles.banner)}>
			Configuration is managed by <code {...stylex.props(shared.mono)}>{authority.path}</code>. Edit the file and
			restart nxdns to change it; the server rejects edits made here.
		</div>
	);
}