import React, { ReactNode } from "react";
import {
  CustomInfoPanel,
  InfoPanelTitle,
  PurpleLineBreak,
  Overlay,
  InfoPanelContainer,
} from "./InfoPanelStyles";

export interface CustomInfoPanelProps {
  isShowPanel?: boolean;
  title?: string;
  panelBody?: ReactNode;
  onClosePanel?: () => void;
}

const close = new URL("./assets/close.svg", import.meta.url).href;

export const InfoPanel: React.FC<CustomInfoPanelProps> = (props) => {
  const { title, panelBody, isShowPanel, onClosePanel } = props;
  return (
    <>
      <InfoPanelContainer isShowPanel={isShowPanel}>
        <Overlay onClick={() => (onClosePanel ? onClosePanel() : null)} />
        <CustomInfoPanel {...props}>
          <InfoPanelTitle {...props}>
            {title}
            <img
              src={close}
              onClick={() => (onClosePanel ? onClosePanel() : null)}
              style={{ marginLeft: "auto" }}
            />
          </InfoPanelTitle>
          <PurpleLineBreak {...props} />
          {panelBody}
        </CustomInfoPanel>
      </InfoPanelContainer>
    </>
  );
};
