import Button from "./ui/Button";
import useModalStore from "../store/modalStore";
import XMarkIcon from "./icons/XMarkIcon";

interface ModalHeaderProps {
  title?: string;
  leftButton?: React.ReactNode;
}

function ModalHeader({ title, leftButton }: ModalHeaderProps) {
  const { setModal } = useModalStore();

  return (
    <div className="2xl:p-[1.111vw] p-4 flex justify-between items-center">
      <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={() => setModal(null)}>
        <div className="2xl:size-[1.111vw] size-4">
          <XMarkIcon />
        </div>
      </Button>
    </div>
  );
}

export default ModalHeader;