import type { ComponentPropsWithoutRef, Ref } from 'react';

import { useCropperState } from './context.ts';

export interface CropperWindowProps extends ComponentPropsWithoutRef<'div'> {
	ref?: Ref<HTMLDivElement>;
}

/**
 * fixed crop window.
 *
 * @param props div props.
 * @returns the crop window element.
 * @throws when rendered outside a `<Cropper.Root>`.
 */
export const Window = (props: CropperWindowProps) => {
	const { children, style, ...rest } = props;
	const cropWindow = useCropperState((state) => state.cropWindow);

	return (
		<div
			{...rest}
			data-cropper-window=""
			// oxlint-disable-next-line react-perf/jsx-no-new-object-as-prop
			style={{
				position: 'absolute',
				left: `${cropWindow.x}px`,
				top: `${cropWindow.y}px`,
				width: `${cropWindow.width}px`,
				height: `${cropWindow.height}px`,
				pointerEvents: 'none',
				...style,
			}}
		>
			{children}
		</div>
	);
};