import React from 'react';
import Footer from '@theme-original/Footer';
import { MendableFloatingButton } from '@mendable/search';

export default function FooterWrapper(props) {
  const iconSpan1 = React.createElement('img', {
    src: '/img/chain.png',
    style: { width: '40px' }
  }, null);

  const icon = React.createElement('div', {
    style: {
      color: '#000000',
      fontSize: '22px',
      width: '48px',
      height: '48px',
      margin: '0px',
      padding: '0px',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      textAlign: 'center'
    }
  }, [iconSpan1]);

  const mendableFloatingButton = React.createElement(
    MendableFloatingButton,
    {
      floatingButtonStyle: { color: '#000000', backgroundColor: '#f6f6f6' },
      anon_key: 'b7f52734-297c-41dc-8737-edbd13196394', // Mendable Search Public ANON key, ok to be public
      showSimpleSearch: true,
      icon: icon,
    }
  );

  return (
    <>
      <Footer />
      {mendableFloatingButton}
    </>
  );
}