import type { Integration, IntegrationContext } from "../contracts/index.ts";
import { compileCss } from "../views/css/index.ts";

export interface ResponsivityOptions {
	breakpoints?: Record<string, string>;
	route?: string;
}

export const DEFAULT_BREAKPOINTS = { sm: "40rem", md: "48rem", lg: "64rem", xl: "80rem" };

/** Adds mobile-first `@responsive name {}` blocks to STCSS. */
export function responsivityIntegration(options: ResponsivityOptions = {}): Integration {
	const breakpoints = { ...DEFAULT_BREAKPOINTS, ...options.breakpoints };
	return {
		name: "responsivity",
		setup(context: IntegrationContext) {
			context.loader("responsive-stcss", {
				name: "responsive-stcss",
				extensions: [".responsive.stcss"],
				load(file) { return { data: { breakpoints }, content: compileCss(file.source, { breakpoints }) }; },
			});
		},
	};
}