import { useNavigate } from "react-router-dom";
import InfoIcon from "../icons/InfoIcon";
import Button3 from "../Button3";
import ArrowLeftIcon from "../icons/ArrowLeftIcon";

const ComplexTopPanel = () => {
  const navigate = useNavigate();

  return (
    <div className="absolute top-0 left-0 z-20 w-full p-3 mt-14">
      <div className="flex sm:gap-2 max-sm:justify-between">
        <div>
          <Button3
            size="small"
            icon={<ArrowLeftIcon />}
            onlyIcon
            onClick={() => navigate("/")}
          />
        </div>
        <div className="font-semibold text-center text-white sm:hidden">
          <p className="text-base">ROVE Home Marasi Drive</p>
          <p className="text-xs">Select a wing</p>
        </div>
        <div>
          <Button3
            variant="secondary"
            icon={<InfoIcon className="w-5 h-5" />}
            className="max-sm:hidden"
            onClick={() => navigate("/about-projects")}
          >
            About Projects
          </Button3>
          <Button3
            variant="secondary"
            icon={<InfoIcon />}
            onlyIcon
            className="sm:hidden"
            onClick={() => navigate("/about-projects")}
          />
        </div>
      </div>
    </div>
  );
};

export default ComplexTopPanel;