/**
 * Panel "Export" — PNG-Download-Toggle und Editor-Preview-Export-Button.
 */
const { createElement: el } = wp.element;
const { __ } = wp.i18n;
const { PanelBody, ToggleControl, Button } = wp.components;

export function ExportPanel({ attributes, setAttributes, onExportPng, openState }) {
  return el(PanelBody, { title: __('Export', 'pop3d-charts'), ...(openState || {}) },
    el(ToggleControl, {
      label: __('Show PNG download on the website', 'pop3d-charts'),
      help: __('When enabled, visitors see a download button next to the chart.', 'pop3d-charts'),
      checked: attributes.viewerPngDownloadEnabled === true,
      onChange: (v) => setAttributes({ viewerPngDownloadEnabled: v }),
      __nextHasNoMarginBottom: true,
    }),
    el('p', { style: { marginTop: 0, fontSize: '12px', color: '#666' } },
      __('Saves the current chart view as a PNG (camera angle as shown; legend and toolbar are not included).', 'pop3d-charts')
    ),
    el(Button, { variant: 'secondary', onClick: onExportPng }, __('PNG Download', 'pop3d-charts'))
  );
}
