import React, { PropsWithChildren } from 'react';
import './styles.css';
const FloatingMenu: React.FC<
  PropsWithChildren<{
    show?: boolean;
    ballonStyle?: React.CSSProperties;
    style?: React.CSSProperties;
  }>
> = ({ ...props }) => {
  return (
    <>
      <div
        style={{
          position: 'absolute',
          top: '43%',
          left: 140,
          zIndex: 99999,
          display: 'flex',
          flex: 1,
          ...props.style,
        }}
      >
        <div
          className={
            props.show
              ? 'base-map-ballon-triangle base-map-ballon-triangle-active'
              : 'base-map-ballon-triangle base-map-ballon-triangle-deactive'
          }
          style={{
            transform: 'rotate(40deg)',
            backgroundColor: '#c4c4c4',
            borderRadius: 4,
          }}
        />
        <div
          className={
            props.show
              ? 'base-map-ballon base-map-ballon-active'
              : 'base-map-ballon base-map-ballon-deactive'
          }
          style={{
            backgroundColor: '#c4c4c4',
            zIndex: 9999999,
            marginLeft: '-1.5rem',
            borderRadius: 6,
            marginTop: '-3rem',
            display: 'flex',

            ...props.ballonStyle,
          }}
        >
          {props.children}
        </div>
      </div>
    </>
  );
};

export default FloatingMenu;
