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

export default function CustomLinkControl({ attributes, setAttributes, enableSeoAttributes = false }) {
  const {
    customLink,
    openInNewTab,
    linkTitle,
    ariaLabel,
    relNoFollow,
    relSponsored,
    relUgc,
  } = attributes;

  return (
    <div className="axcelersblocks-settings-section">
      <h3 className="axcelersblocks-settings-title">{__('Custom Link', 'axcelersblocks')}</h3>

      <TextControl
        label={__('URL', 'axcelersblocks')}
        value={customLink || ''}
        onChange={(value) => setAttributes({ customLink: value })}
        placeholder="https://example.com"
      />

      <ToggleControl
        label={__('Open in new tab', 'axcelersblocks')}
        checked={!!openInNewTab}
        onChange={(val) => setAttributes({ openInNewTab: val })}
      />

      {enableSeoAttributes && (
        <>
          <TextControl
            label={__('Link Title', 'axcelersblocks')}
            value={linkTitle || ''}
            onChange={(value) => setAttributes({ linkTitle: value })}
            placeholder={__('Optional title attribute', 'axcelersblocks')}
          />

          <TextControl
            label={__('ARIA Label', 'axcelersblocks')}
            value={ariaLabel || ''}
            onChange={(value) => setAttributes({ ariaLabel: value })}
            placeholder={__('Optional accessible label', 'axcelersblocks')}
          />

          <ToggleControl
            label={__('Add rel="nofollow"', 'axcelersblocks')}
            checked={!!relNoFollow}
            onChange={(val) => setAttributes({ relNoFollow: val })}
          />

          <ToggleControl
            label={__('Add rel="sponsored"', 'axcelersblocks')}
            checked={!!relSponsored}
            onChange={(val) => setAttributes({ relSponsored: val })}
          />

          <ToggleControl
            label={__('Add rel="ugc"', 'axcelersblocks')}
            checked={!!relUgc}
            onChange={(val) => setAttributes({ relUgc: val })}
          />
        </>
      )}
    </div>
  );
}
