import { InspectorControls } from "@wordpress/block-editor";
import { PanelBody, RangeControl } from "@wordpress/components";
import { __ } from "@wordpress/i18n";

const SidePanel = ({ attributes, setAttributes }) => {
	const { spacing, cardHeight, stickyOffset, cardOffset } = attributes;

	return (
		<InspectorControls>
			<PanelBody title={__("Stack Settings", "orphic-ui")} initialOpen={true}>
				<RangeControl
					label={__("Spacing between cards", "orphic-ui")}
					value={spacing}
					onChange={(value) => setAttributes({ spacing: value })}
					min={0}
					max={200}
				/>

				<RangeControl
					label={__("Card height (px)", "orphic-ui")}
					value={cardHeight}
					onChange={(value) => setAttributes({ cardHeight: value })}
					min={200}
					max={800}
					step={10}
				/>

				<RangeControl
					label={__("Sticky offset from top (px)", "orphic-ui")}
					value={stickyOffset}
					onChange={(value) => setAttributes({ stickyOffset: value })}
					min={0}
					max={500}
					step={10}
				/>

				<RangeControl
					label={__("Card offset (px)", "orphic-ui")}
					value={cardOffset}
					onChange={(value) => setAttributes({ cardOffset: value })}
					min={0}
					max={200}
					step={25}
				/>
			</PanelBody>
		</InspectorControls>
	);
};

export default SidePanel;
