import clsx from "clsx";
import usePopupStore from "../store/popupStore";
import XMarkIcon from "./icons/XMarkIcon";
import Button from "./ui/Button";

interface PopupHeaderProps {
  title?: string;
  leftButton?: React.ReactNode;
  headerRef: React.RefObject<HTMLDivElement | null>;
  draggable?: boolean;
}

function PopupHeader({
  title,
  leftButton,
  headerRef,
  draggable,
}: PopupHeaderProps) {
  const { setPopup } = usePopupStore();

  return (
    <div
      ref={headerRef}
      className={clsx(
        "2xl:p-[1.111vw] p-4 flex justify-between items-center cursor-graba select-none relative",
        draggable && "cursor-grab active:cursor-grabbing"
      )}
    >
      <div className="2xl:size-[2.222vw] size-8">{leftButton}</div>
      {title && (
        <p className="title-s flex-1 font-medium text-center">{title}</p>
      )}
      <Button variant="secondary" size="small" onClick={() => setPopup(null)}>
        <div className="2xl:size-[1.111vw] size-4">
          <XMarkIcon />
        </div>
      </Button>
      <hr className="bg-[#F2F2F2] 2xl:h-[0.069vw] h-px absolute bottom-0 w-[calc(100%-2.778vw)] left-[1.389vw]" />
    </div>
  );
}

export default PopupHeader;
