import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';

const TEMPLATE = [
  ['memberpress/readylaunch-account-menu', {}],
  ['memberpress/readylaunch-account-content', {}],
];

const ALLOWED_BLOCKS = [
  'memberpress/readylaunch-account-menu',
  'memberpress/readylaunch-account-content',
];

export default function Edit({ attributes }) {
  const { layout = 'vertical' } = attributes;

  const blockProps = useBlockProps({
    // Mirror the server render's wrapper classes exactly so the editor
    // canvas sees the same shell.css grid rules: the canonical
    // `mepr-rl-shell` / `mepr-rl-shell--{layout}` pair drives layout, and
    // the addon-scoped `mepr-rl-account` pair stays available as a
    // customizer hook. Match `memberpress/pro-account-tabs` for wide width.
    className: `mepr-rl-shell mepr-rl-shell--${layout} mepr-rl-account mepr-rl-account--${layout} alignwide wp-block`,
  });

  return (
    <div {...blockProps}>
      <InnerBlocks
        template={TEMPLATE}
        templateLock="all"
        allowedBlocks={ALLOWED_BLOCKS}
      />
    </div>
  );
}
