import { useBlockProps } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import './editor.scss';
import SidePanel from './side-panel';

export default function Edit({ attributes, setAttributes }) {
  const { apiKey, zoom, borderWidth, borderColor, borderRadius } = attributes;
  
  const blockProps = useBlockProps({
    style: {
      borderWidth: `${borderWidth}px`,
      borderColor: borderColor,
      borderRadius: `${borderRadius}px`,
    }
  });

  return (
    <div {...blockProps}>
      <div className="map-placeholder">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/>
        </svg>
        {!apiKey && (
          <h4>{__("Api key need to set in the admin page of the plugin", "orphic-ui")}</h4>
        )}
        {!zoom && (
          <h4>{__("Please set the zoom level in the block settings", "orphic-ui")}</h4>
        )}
        <h4>{__("Note: The Google Map preview is only available on the frontend", "orphic-ui")}</h4>
      </div>
      <SidePanel attributes={attributes} setAttributes={setAttributes} />
    </div>
  );
} 