import React from 'react';
import { __ } from '@wordpress/i18n';
import { PanelBody, TextControl, ToggleControl } from '@wordpress/components';

const LinkSetting = ({ attributes, setAttributes, panelTitle = __('Link Settings', 'zenblocks') }) => {
    const { link, openInNewTab } = attributes;

    const onLinkChange = (value) => {
        setAttributes({ link: value });
    };

    const onOpenInNewTabChange = (value) => {
        setAttributes({ openInNewTab: value });
    };

    return (
        <PanelBody
            title={panelTitle}
            initialOpen={false}
        >
            <TextControl
                label={__('URL', 'zenblocks')}
                value={link || ''}
                onChange={onLinkChange}
                placeholder="https://example.com"
            />
            
            <ToggleControl
                label={__('Open in new tab', 'zenblocks')}
                checked={!!openInNewTab}
                onChange={onOpenInNewTabChange}
            />
        </PanelBody>
    );
};

export default LinkSetting;
