import { __ } from "@wordpress/i18n";
import { InspectorControls } from "@wordpress/block-editor";
import { __experimentalLinkControl as LinkControl } from "@wordpress/block-editor";
import { PanelBody, TextControl } from "@wordpress/components";

export default function SidePanel({ attributes, setAttributes }) {
	const { url, opensInNewTab, title, text } = attributes;

	return (
		<InspectorControls>
			<PanelBody
				title={__("Hover Highlight Item", "orphic-ui")}
				initialOpen={true}
			>
				<TextControl
					label={__("Title", "orphic-ui")}
					value={title}
					onChange={(title) =>
						setAttributes({
							title: title,
						})
					}
				/>

				<TextControl
					label={__("Subtitle", "orphic-ui")}
					value={text}
					onChange={(text) =>
						setAttributes({
							text: text,
						})
					}
				/>
				<div className="orphic-ui-link-control-wrap">
					<LinkControl
						value={{ url, opensInNewTab }}
						onChange={(newLink) => {
							setAttributes({
								url: newLink.url,
								opensInNewTab: newLink.opensInNewTab,
							});
						}}
						settings={[
							{
								id: "opensInNewTab",
								title: __("Open in new tab", "your-text-domain"),
							},
						]}
					/>
				</div>
			</PanelBody>
		</InspectorControls>
	);
}
