import type { JSX, ValidComponent } from "@solidjs/web";
/**
 * `<Drawer.Content>` — marker container for the drawer's interactive body.
 */

import { dynamic } from "@solidjs/web";
import { omit } from "solid-js";
import { useDialogRootContext } from "../../dialog/dialog-root-context";
import { mergeRootProps } from "../../internals/merge-root-props";
import { resolveClassStyle } from "../../internals/resolve-class-style";
import type { BaseUIComponentProps } from "../../internals/types";
import { DRAWER_CONTENT_ATTRIBUTE } from "./drawer-content-data-attributes";

// biome-ignore lint/complexity/noBannedTypes: state is empty — matches React.
export type DrawerContentState = {};

export interface DrawerContentProps
	extends BaseUIComponentProps<"div", DrawerContentState> {
	/**
	 * Tag/component to render. Defaults to `"div"`. Replaces the
	 * pre-spike `render` prop (axis G).
	 */
	as?: ValidComponent;
}

/**
 * A container for the drawer contents. Renders a `<div>` element.
 */
export function DrawerContent(props: DrawerContentProps): JSX.Element {
	useDialogRootContext();

	const internal: Record<string, unknown> = {
		[DRAWER_CONTENT_ATTRIBUTE]: "",
	};

	const userClassStyle = resolveClassStyle(props, () => ({}));

	const userProps = omit(props, "as", "class", "style", "attrs");

	let merged: Record<string, unknown> = mergeRootProps(
		internal,
		userClassStyle,
	);
	merged = mergeRootProps(merged, userProps);

	const Tag = dynamic(() => props.as ?? "div");
	return <Tag {...merged} />;
}