import { __ } from '@wordpress/i18n';
import { useMemo } from '@wordpress/element';
import { PanelBody } from '@wordpress/components';
import HeadingTag from '../../../components/settings/HeadingTag';
import DynamicContentSettings from '../../../components/settings/DynamicContentSettings';
import CustomLinkControl from '../../../components/settings/CustomLinkControl';

const ALLOWED_DYNAMIC_TAGS = [
  'post_title', 'post_excerpt', 'post_permalink', 'post_date', 'post_meta',
  'comments_count', 'comments_url', 'term_list', 'post_author',
  'term_name', 'term_description', 'term_meta', 'acf_field',
];

export function SettingsPanel({ attributes, setAttributes }) {
  const allowedTags = useMemo(() => ALLOWED_DYNAMIC_TAGS, []);

  return (
    <PanelBody title="Heading" initialOpen>
      <div className="axcelersblocks-settings-section">
        <h3 className="axcelersblocks-settings-title">{__('Tag', 'axcelersblocks')}</h3>
        <HeadingTag value={attributes.tagName} onChange={(value) => setAttributes({ tagName: value })} />
        <CustomLinkControl attributes={attributes} setAttributes={setAttributes} enableSeoAttributes />
      </div>
      <hr className="axcelersblocks-divider" />
      <div className="axcelersblocks-settings-section">
        <h3 className="axcelersblocks-settings-title">{__('Dynamic Data', 'axcelersblocks')}</h3>
        <DynamicContentSettings
          attributes={attributes}
          setAttributes={setAttributes}
          allowedTags={allowedTags}
        />
      </div>
    </PanelBody>
  );
}
