import type { ReactNode } from "react";
import * as stylex from "@stylexjs/stylex";
import { styles as shared } from "./styles";
import { colors } from "./tokens.stylex";

export interface Definition {
	/** What the operator calls the value. */
	label: string;
	/**
	 * The exact key in the configuration file, shown secondarily so the reader
	 * can find the line to edit. Omitted for a derived value that has no key —
	 * inventing one would send the reader looking for something not there.
	 */
	zonKey?: string;
	value: ReactNode;
}

const styles = stylex.create({
	list: {
		display: "grid",
		gap: "0.75rem",
		gridTemplateColumns: {
			default: "repeat(1, minmax(0, 1fr))",
			"@media (min-width: 640px)": "repeat(2, minmax(0, 1fr))",
		},
		margin: 0,
	},
	term: {
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
		fontWeight: 500,
	},
	key: {
		marginLeft: "0.375rem",
		fontSize: "0.75rem",
		lineHeight: "1rem",
		fontWeight: 400,
		color: colors.textMuted,
	},
	value: {
		marginTop: "0.125rem",
		marginLeft: 0,
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
		color: colors.text,
	},
});

/**
 * Scalars as a definition list — the file-mode counterpart of a form section.
 * Nothing here is interactive: a value the process loaded from a file is read,
 * not edited.
 */
export default function DefinitionList({ items }: { items: readonly Definition[] }) {
	return (
		<dl {...stylex.props(styles.list)}>
			{items.map((item) => (
				<div key={item.label}>
					<dt {...stylex.props(styles.term)}>
						{item.label}
						{item.zonKey !== undefined && (
							<code {...stylex.props(shared.mono, styles.key)}>{item.zonKey}</code>
						)}
					</dt>
					<dd {...stylex.props(styles.value)}>{item.value}</dd>
				</div>
			))}
		</dl>
	);
}
