import dynamic from "next/dynamic";

import { PopoverProps } from "../../contexts/Context";

import styles from "./styles.module.scss";

const Body = dynamic(() => import("../Body"));
const Header = dynamic(() => import("../Header"));
const InputArea = dynamic(() => import("../InputArea"));

export default function PopOver({
  color,
  onClose,
  baseUrl,
  ownerName,
  wallpaper,
  whatsappNumber,
  backgroundColor,
}: PopoverProps) {
  return (
    <div
      className={styles.container}
      style={{
        background: `url(${wallpaper}) no-repeat center center`,
        backgroundSize: "cover",
      }}
    >
      <div className={styles.header}>
        <Header
          color={color}
          onClose={onClose}
          backgroundColor={backgroundColor}
        />
      </div>
      <div className={styles.body}>
        <Body
          color={color}
          baseUrl={baseUrl}
          ownerName={ownerName}
          backgroundColor={backgroundColor}
          whatsappNumber={whatsappNumber}
        />
      </div>
      <div className={styles.input}>
        <InputArea color={color} backgroundColor={backgroundColor} />
      </div>
    </div>
  );
}
