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

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

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

  return (
    <div
      ref={ref}
      className="2xl:p-[1.111vw] p-4 flex justify-between items-center select-none relative"
    >
      <div className="2xl:size-[2.222vw] size-8">{leftButton}</div>
      {title && (
        <p className="flex-1 font-medium text-center title-s">{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;