import { ArrowRight } from "lucide-react";
import { memo, useCallback } from "react";
import { useNavigate } from "@remix-run/react";
import { safeGoBack } from "~/utils/helpers";

interface ProfilePagesHeaderProps {
  title: string;
  hideBackButton?: boolean;
  rightContent?: React.ReactNode;
}

const ProfilePagesHeader = memo(function ProfilePagesHeader({
  title,
  hideBackButton,
  rightContent,
}: ProfilePagesHeaderProps) {
  const navigate = useNavigate();
  const handleBack = useCallback(() => {
    safeGoBack(navigate);
  }, [navigate]);

  return (
    <div className="lg:hidden sticky top-0 z-30 bg-WHITE pt-[env(safe-area-inset-top)]">
      <div className="relative flex flex-row h-[65px] bg-WHITE w-full items-center justify-center border-b border-inner-border">
        {!hideBackButton && (
          <ArrowRight
            onClick={handleBack}
            className="absolute top-5 right-5 cursor-pointer"
          />
        )}
        <p className="text-B16 font-bold">{title}</p>
        {rightContent && (
          <div className="absolute top-4 left-4">{rightContent}</div>
        )}
      </div>
    </div>
  );
});

export default ProfilePagesHeader;